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:
+13
@@ -0,0 +1,13 @@
|
||||
import Handler from '../Handler';
|
||||
import Element, { ElementEvent } from '../Element';
|
||||
export default class Draggable {
|
||||
handler: Handler;
|
||||
_draggingTarget: Element;
|
||||
_dropTarget: Element;
|
||||
_x: number;
|
||||
_y: number;
|
||||
constructor(handler: Handler);
|
||||
_dragStart(e: ElementEvent): void;
|
||||
_drag(e: ElementEvent): void;
|
||||
_dragEnd(e: ElementEvent): void;
|
||||
}
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
var Param = (function () {
|
||||
function Param(target, e) {
|
||||
this.target = target;
|
||||
this.topTarget = e && e.topTarget;
|
||||
}
|
||||
return Param;
|
||||
}());
|
||||
var Draggable = (function () {
|
||||
function Draggable(handler) {
|
||||
this.handler = handler;
|
||||
handler.on('mousedown', this._dragStart, this);
|
||||
handler.on('mousemove', this._drag, this);
|
||||
handler.on('mouseup', this._dragEnd, this);
|
||||
}
|
||||
Draggable.prototype._dragStart = function (e) {
|
||||
var draggingTarget = e.target;
|
||||
while (draggingTarget && !draggingTarget.draggable) {
|
||||
draggingTarget = draggingTarget.parent || draggingTarget.__hostTarget;
|
||||
}
|
||||
if (draggingTarget) {
|
||||
this._draggingTarget = draggingTarget;
|
||||
draggingTarget.dragging = true;
|
||||
this._x = e.offsetX;
|
||||
this._y = e.offsetY;
|
||||
this.handler.dispatchToElement(new Param(draggingTarget, e), 'dragstart', e.event);
|
||||
}
|
||||
};
|
||||
Draggable.prototype._drag = function (e) {
|
||||
var draggingTarget = this._draggingTarget;
|
||||
if (draggingTarget) {
|
||||
var x = e.offsetX;
|
||||
var y = e.offsetY;
|
||||
var dx = x - this._x;
|
||||
var dy = y - this._y;
|
||||
this._x = x;
|
||||
this._y = y;
|
||||
draggingTarget.drift(dx, dy, e);
|
||||
this.handler.dispatchToElement(new Param(draggingTarget, e), 'drag', e.event);
|
||||
var dropTarget = this.handler.findHover(x, y, draggingTarget).target;
|
||||
var lastDropTarget = this._dropTarget;
|
||||
this._dropTarget = dropTarget;
|
||||
if (draggingTarget !== dropTarget) {
|
||||
if (lastDropTarget && dropTarget !== lastDropTarget) {
|
||||
this.handler.dispatchToElement(new Param(lastDropTarget, e), 'dragleave', e.event);
|
||||
}
|
||||
if (dropTarget && dropTarget !== lastDropTarget) {
|
||||
this.handler.dispatchToElement(new Param(dropTarget, e), 'dragenter', e.event);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Draggable.prototype._dragEnd = function (e) {
|
||||
var draggingTarget = this._draggingTarget;
|
||||
if (draggingTarget) {
|
||||
draggingTarget.dragging = false;
|
||||
}
|
||||
this.handler.dispatchToElement(new Param(draggingTarget, e), 'dragend', e.event);
|
||||
if (this._dropTarget) {
|
||||
this.handler.dispatchToElement(new Param(this._dropTarget, e), 'drop', e.event);
|
||||
}
|
||||
this._draggingTarget = null;
|
||||
this._dropTarget = null;
|
||||
};
|
||||
return Draggable;
|
||||
}());
|
||||
export default Draggable;
|
||||
Reference in New Issue
Block a user