bot_dev1
85df71fc28
- 新增OperationDashboard.vue全屏大屏组件 - 添加6个核心KPI指标卡片: 进水总量/出水总量/产销差率/营收额/平均水质/报警次数 - 实现6个ECharts图表: 供水趋势/水质分布/报警统计/管网空间/设备状态/营收分析 - 创建静态HTML版本operation-dashboard.html，使用CDN加载Vue3/ECharts/Element Plus - 更新路由配置，添加/operation路径支持 - 修复nextTick导入问题，优化build脚本 🚧 开发者: bot_dev1 📝 任务: #38 [BI] 运营仪表盘 + 供水专题大屏
71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
/**
|
|
* Creates a {@link createBillboardPointCallback.CanvasFunction} that will create a canvas with a point.
|
|
*
|
|
* @param {number} centerAlpha The alpha of the center of the point. The value must be in the range [0.0, 1.0].
|
|
* @param {string} cssColor The CSS color string.
|
|
* @param {string} cssOutlineColor The CSS color of the point outline.
|
|
* @param {number} cssOutlineWidth The width of the outline in pixels.
|
|
* @param {number} pixelSize The size of the point in pixels.
|
|
* @return {createBillboardPointCallback.CanvasFunction} The function that will return a canvas with the point drawn on it.
|
|
*
|
|
* @private
|
|
*/
|
|
function createBillboardPointCallback(
|
|
centerAlpha,
|
|
cssColor,
|
|
cssOutlineColor,
|
|
cssOutlineWidth,
|
|
pixelSize,
|
|
) {
|
|
return function () {
|
|
const canvas = document.createElement("canvas");
|
|
|
|
const length = pixelSize + 2 * cssOutlineWidth;
|
|
canvas.height = canvas.width = length;
|
|
|
|
const context2D = canvas.getContext("2d");
|
|
context2D.clearRect(0, 0, length, length);
|
|
|
|
if (cssOutlineWidth !== 0) {
|
|
context2D.beginPath();
|
|
context2D.arc(length / 2, length / 2, length / 2, 0, 2 * Math.PI, true);
|
|
context2D.closePath();
|
|
context2D.fillStyle = cssOutlineColor;
|
|
context2D.fill();
|
|
// Punch a hole in the center if needed.
|
|
if (centerAlpha < 1.0) {
|
|
context2D.save();
|
|
context2D.globalCompositeOperation = "destination-out";
|
|
context2D.beginPath();
|
|
context2D.arc(
|
|
length / 2,
|
|
length / 2,
|
|
pixelSize / 2,
|
|
0,
|
|
2 * Math.PI,
|
|
true,
|
|
);
|
|
context2D.closePath();
|
|
context2D.fillStyle = "black";
|
|
context2D.fill();
|
|
context2D.restore();
|
|
}
|
|
}
|
|
|
|
context2D.beginPath();
|
|
context2D.arc(length / 2, length / 2, pixelSize / 2, 0, 2 * Math.PI, true);
|
|
context2D.closePath();
|
|
context2D.fillStyle = cssColor;
|
|
context2D.fill();
|
|
|
|
return canvas;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* A function that returns a canvas containing an image of a point.
|
|
* @callback createBillboardPointCallback.CanvasFunction
|
|
* @returns {HTMLCanvasElement} The result of the calculation.
|
|
*/
|
|
export default createBillboardPointCallback;
|