完成时间刻度的分级展示绘制及操作

This commit is contained in:
duanshengchao 2024-12-06 16:58:07 +08:00
parent f1a9edc3f6
commit 74bdcce7d2
10 changed files with 634 additions and 18 deletions

View File

@ -87,6 +87,7 @@ set(UI_FILES
)
set(UTIL_FILES
util/TimeLine/timeLine_globals.h
util/TimeLine/timeLineWidget.h
util/TimeLine/timeLineWidget.cpp
util/TimeLine/timeLineItem.h

View File

@ -17,6 +17,7 @@ class Dashboard;
class DashboardNamingDialog;
class PanelSelectionDialog;
class DateTimeWidget;
class TimeLineWidget;
namespace dashboardFrame {
enum frameType
@ -97,6 +98,7 @@ private:
DashboardNamingDialog* m_pDashboardNamingDialog;
PanelSelectionDialog* m_pPanelSelectionDialog;
DateTimeWidget* m_pDateTimeWidget;
TimeLineWidget* m_pTimeLineWidget;
};
#endif

View File

@ -10,6 +10,7 @@
#include "dashboardNamingDialog.h"
#include "panelSelectionDialog.h"
#include "dateTimeWidget.h"
#include "util/TimeLine/timeLineWidget.h"
#include <QKeyEvent>
#include <QMenu>
@ -53,6 +54,12 @@ DashboardFrame::DashboardFrame(const QString& strName, dashboardFrame::frameType
ui->hLayout_dashboardTabBar->addWidget(m_pDashboardTabBar);
connect(m_pDashboardTabBar, SIGNAL(tabMoved(int, int)), this, SLOT(onSignal_dashboardTabMoved(int, int)));
m_pTimeLineWidget = new TimeLineWidget(this);
m_pTimeLineWidget->setBackground(QColor(24, 32, 38));
m_pTimeLineWidget->setTimelineColor(QColor(250, 250, 250));
m_pTimeLineWidget->setTimeScaleSize(200);
ui->layout_timeLine->addWidget(m_pTimeLineWidget);
connect(ui->btnAddDashboard, SIGNAL(clicked()), this, SLOT(onBtnClicked_addDashboard()));
connect(ui->btnAddPanel, SIGNAL(clicked()), this, SLOT(onBtnClicked_addDataPanel()));
//connect(ui->btnDashboradList1, SIGNAL(clicked()), this, SLOT(onBtnClicked_dashboardList()));

View File

@ -52,8 +52,25 @@
</size>
</property>
<property name="styleSheet">
<string notr="true">background-color: rgba(0, 141, 212, 80);</string>
<string notr="true"/>
</property>
<layout class="QHBoxLayout" name="layout_timeLine">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
</layout>
</widget>
</item>
<item>

View File

@ -106,7 +106,7 @@ color:rgb(250,250,250);</string>
<string>11:39:52</string>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
<set>Qt::AlignmentFlag::AlignCenter</set>
</property>
</widget>
</item>
@ -294,7 +294,7 @@ background-color:transparent;
<item>
<spacer name="horizontalSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
<enum>Qt::Orientation::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
@ -346,7 +346,7 @@ QPushButton:pressed
<item>
<spacer name="horizontalSpacer_2">
<property name="orientation">
<enum>Qt::Horizontal</enum>
<enum>Qt::Orientation::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>

View File

@ -0,0 +1,480 @@
#include "timeLineItem.h"
#include <QPainter>
namespace TimeLine
{
class TimeLineItemPrivate
{
public:
TimeLineItemPrivate();
QRect m_rect;
QRect m_titleRect;
QColor m_lineColor;
TimeUnit m_curTimeUnit;
QDateTime m_curTime;
QDateTime m_leftTime; //当前时间左边第一个需要输出展示的时间点
int m_curTimePos; //当前时间所在的位置(x值),默认在中间(=0)
int m_leftTimePos;
DisplayState m_curState;
int m_scaleSize; //时间刻度大小,单位为像素
int m_scaleFactor; //缩放倍数
bool m_leftMouseIsDown; //鼠标左键是否按下
QPointF m_mouseDownPoint; //鼠标左键按下的坐标
QDateTime m_mouseDownTime; //鼠标左键是按下坐标对应的时间
};
TimeLineItemPrivate::TimeLineItemPrivate()
{
m_lineColor = Qt::white;
m_curTimeUnit = TU_Year;
m_curTime = QDateTime::currentDateTime();
m_leftTime = m_curTime;
m_curTimePos = 0;
m_leftTimePos = 0;
m_curState = RealTime;
m_scaleSize = 100;
m_scaleFactor = 1;
}
TimeLineItem::TimeLineItem() :
d_ptr(new TimeLine::TimeLineItemPrivate)
{
}
TimeLineItem::~TimeLineItem()
{
delete d_ptr;
}
QRectF TimeLineItem::boundingRect() const
{
//return QRectF(-d_ptr->m_rect.width() / 2, -d_ptr->m_rect.height() / 2, d_ptr->m_rect.width(), d_ptr->m_rect.height());
return d_ptr->m_rect;
}
void TimeLineItem::updateBoundingRect(const QRect& r)
{
d_ptr->m_rect = QRect(-r.width() / 2, -r.height() / 2, r.width(), r.height());
d_ptr->m_titleRect = QRect(-r.width() / 2, -r.height() / 2, r.width(), 35);
d_ptr->m_curTimePos = d_ptr->m_rect.right() - 80;
}
void TimeLineItem::paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget)
{
Q_UNUSED(widget);
QRect rect = boundingRect().toRect();
QPen pen = painter->pen();
QBrush brush = painter->brush();
QFont font = painter->font();
QString strCurState = "";
//绘制title包含当前日期显示、状态显示不同状态对应不同颜色
if(d_ptr->m_curState == RealTime)
{
brush.setColor(QColor(39, 102, 59));
brush.setStyle(Qt::SolidPattern);
strCurState = QString::fromWCharArray(L"实时数据");
}
else
{
brush.setColor(QColor(46, 53, 63));
brush.setStyle(Qt::SolidPattern);
strCurState = QString::fromWCharArray(L"历史数据");
}
QRect titleRect = d_ptr->m_titleRect;
painter->setBrush(brush);
painter->drawRect(titleRect);
//tiltle中的当前日期
pen.setColor(d_ptr->m_lineColor);
font.setFamily(QString::fromWCharArray(L"微软雅黑"));
font.setPointSize(10);
font.setBold(true);
painter->setPen(pen);
painter->setFont(font);
QFontMetrics metrics(font);
QString strCurTime = d_ptr->m_curTime.toString("yyyy-MM-dd");
QRect textRect = metrics.boundingRect(strCurTime);
painter->drawText(titleRect.x() + 10, titleRect.y() + (titleRect.height() - textRect.height()) * 0.5 + textRect.height() - 5, strCurTime);
//tiltle中的当前状态
textRect = metrics.boundingRect(strCurState);
painter->drawText(titleRect.x() + (titleRect.width() - textRect.width()) * 0.5, titleRect.y() + (titleRect.height() - textRect.height()) * 0.5 + textRect.height() - 5, strCurState);
//刻度线
drawScaleLine(painter);
//当前时间
painter->drawLine(d_ptr->m_curTimePos, d_ptr->m_titleRect.bottom() + 2, d_ptr->m_curTimePos, boundingRect().bottom());
}
void TimeLineItem::drawScaleLine(QPainter* p)
{
QPen pen = p->pen();
pen.setWidth(2);
p->setPen(pen);
QRect rect = boundingRect().toRect();
d_ptr->m_leftTime = calculateLeftTime();
d_ptr->m_leftTimePos = calculateLeftTimePos();
int x_Left = d_ptr->m_leftTimePos;
int x_Right = x_Left + d_ptr->m_scaleSize;
while(1)
{
if(x_Left < -rect.width() / 2 - 50)
break;
p->drawLine(x_Left, d_ptr->m_titleRect.bottom(), x_Left, d_ptr->m_titleRect.bottom() - 5);
drawTimeText(p, x_Left);
x_Left -= d_ptr->m_scaleSize;
}
while(1)
{
if(x_Right > rect.width() / 2 + 50)
break;
p->drawLine(x_Right, d_ptr->m_titleRect.bottom(), x_Right, d_ptr->m_titleRect.bottom() - 5);
drawTimeText(p, x_Right);
x_Right += d_ptr->m_scaleSize;
}
}
void TimeLineItem::drawTimeText(QPainter* p, int x)
{
QDateTime time = calculateTime(x);
QString text = "";
QString text1 = "";
switch(d_ptr->m_curTimeUnit)
{
case TU_Year:
{
text = time.toString("yyyy");
break;
}
case TU_Month:
{
int month = time.date().month();
if (month == 1)
text1 = time.toString("yyyy");
text = time.toString("MM");
break;
}
case TU_Day:
{
int day = time.date().day();
if (day == 1)
text1 = time.toString("yyyy-MM");
text = time.toString("dd");
break;
}
case TU_Hour:
{
int hour = time.time().hour();
if (hour == 0)
text1 = time.toString("MM-dd");
text = time.toString("hh");
break;
}
case TU_Minute_30:
case TU_Minute_20:
case TU_Minute_15:
case TU_Minute_10:
case TU_Minute_5:
case TU_Minute_3:
case TU_Minute_1:
{
int minute = time.time().minute();
if (minute == 0)
text1 = time.toString("MM-dd");
text = time.toString("hh:mm");
break;
}
case TU_Second_30:
case TU_Second_10:
case TU_Second_1:
{
int second = time.time().second();
if(second == 0)
text1 = time.toString("MM-dd");
text = time.toString("hh:mm:ss");
break;
}
case TU_MSecond_500:
case TU_MSecond_100:
case TU_MSecond_50:
case TU_MSecond_10:
{
int msec = time.time().msec();
if(msec == 0)
text1 = time.toString("MM-dd");
text = time.toString("mm:ss:z");
break;
}
default:
break;
}
QFont font = p->font();
// font.setFamily(QString::fromWCharArray(L"微软雅黑"));
// font.setPointSize(10);
// font.setBold(true);
// p->setFont(font);
QFontMetrics metrics(font);
if(!text.isEmpty())
{
QRect textRect = metrics.boundingRect(text);
p->drawText(x - textRect.width() * 0.5, d_ptr->m_titleRect.bottom() + textRect.height(), text);
}
if(!text1.isEmpty())
{
QRect textRect = metrics.boundingRect(text1);
p->drawText(x - textRect.width() * 0.5, d_ptr->m_titleRect.bottom() + textRect.height() * 2, text1);
}
}
QDateTime TimeLineItem::calculateLeftTime()
{
QDateTime dateTime;
QString strDateTime = d_ptr->m_curTime.toString("yyyyMMddhhmmssz");
switch(d_ptr->m_curTimeUnit)
{
case TU_Year:
strDateTime = strDateTime.left(4) + "01010000000";
break;
case TU_Month:
strDateTime = strDateTime.left(6) + "010000000";
break;
case TU_Day:
strDateTime = strDateTime.left(8) + "0000000";
break;
case TU_Hour:
strDateTime = strDateTime.left(10) + "00000";
break;
case TU_Minute_30:
strDateTime = strDateTime.left(12) + "000";
break;
case TU_Minute_20:
strDateTime = strDateTime.left(12) + "000";
break;
case TU_Minute_15:
strDateTime = strDateTime.left(12) + "000";
break;
case TU_Minute_10:
strDateTime = strDateTime.left(12) + "000";
break;
case TU_Minute_5:
strDateTime = strDateTime.left(12) + "000";
break;
case TU_Minute_3:
strDateTime = strDateTime.left(12) + "000";
break;
case TU_Minute_1:
strDateTime = strDateTime.left(12) + "000";
break;
case TU_Second_30:
strDateTime = strDateTime.left(14) + "0";
break;
case TU_Second_10:
strDateTime = strDateTime.left(14) + "0";
break;
case TU_Second_1:
strDateTime = strDateTime.left(14) + "0";
break;
case TU_MSecond_500:
break;
case TU_MSecond_100:
break;
case TU_MSecond_50:
break;
case TU_MSecond_10:
break;
default:
break;
}
dateTime = QDateTime::fromString(strDateTime, "yyyyMMddhhmmssz");
return dateTime;
}
int TimeLineItem::calculateLeftTimePos()
{
qint64 timeRange = d_ptr->m_leftTime.msecsTo(d_ptr->m_curTime);
qint64 scaleRange = 0;
switch(d_ptr->m_curTimeUnit)
{
case TU_Year:
scaleRange = 365 * 24 * 60 * 60 * (qint64)1000;
break;
case TU_Month:
scaleRange = 30 * 24 * 60 * 60 * (qint64)1000;
break;
case TU_Day:
scaleRange = 24 * 60 * 60 * 1000;
break;
case TU_Hour:
scaleRange = 60 * 60 *1000;
break;
case TU_Minute_30:
scaleRange = 30 * 60 *1000;
break;
case TU_Minute_20:
scaleRange = 20 * 60 *1000;
break;
case TU_Minute_15:
scaleRange = 15 * 60 *1000;
break;
case TU_Minute_10:
scaleRange = 10 * 60 *1000;
break;
case TU_Minute_5:
scaleRange = 5 * 60 *1000;
break;
case TU_Minute_3:
scaleRange = 3 * 60 *1000;
break;
case TU_Minute_1:
scaleRange = 60 * 1000;
break;
case TU_Second_30:
scaleRange = 30 * 1000;
break;
case TU_Second_10:
scaleRange = 10 * 1000;
break;
case TU_Second_1:
scaleRange = 1 * 1000;
break;
case TU_MSecond_500:
scaleRange = 500;
break;
case TU_MSecond_100:
scaleRange = 100;
break;
case TU_MSecond_50:
scaleRange = 50;
break;
case TU_MSecond_10:
scaleRange = 10;
break;
default:
break;
}
//qDebug() << timeRange << ", " << scaleRange;
double dRatio = (double)timeRange / scaleRange;
return d_ptr->m_curTimePos + (-d_ptr->m_scaleSize * dRatio);
}
QDateTime TimeLineItem::calculateTime(int x)
{
if(x == d_ptr->m_curTimePos)
return d_ptr->m_curTime;
QDateTime dateTime;
double dUnit = (double)(x - d_ptr->m_leftTimePos) / (double)d_ptr->m_scaleSize;
switch(d_ptr->m_curTimeUnit)
{
case TU_Year:
dateTime = d_ptr->m_leftTime.addYears((int)dUnit);//先计算年份
dateTime = dateTime.addMSecs(dateTime.date().daysInYear() * 24 * 60 * 60 * 1000 * (dUnit - (int)dUnit)); //再计算时间
break;
case TU_Month:
dateTime = d_ptr->m_leftTime.addMonths((int)dUnit);//先计算月份
dateTime = dateTime.addMSecs(dateTime.date().daysInMonth() * 24 * 60 * 60 * 1000 * (dUnit - (int)dUnit)); //再计算时间
break;
case TU_Day:
dateTime = d_ptr->m_leftTime.addMSecs(24 * 60 * 60 * 1000 * dUnit);
break;
case TU_Hour:
dateTime = d_ptr->m_leftTime.addMSecs(60 * 60 * 1000 * dUnit);
break;
case TU_Minute_30:
dateTime = d_ptr->m_leftTime.addMSecs(30 * 60 * 1000 * dUnit);
break;
case TU_Minute_20:
dateTime = d_ptr->m_leftTime.addMSecs(20 * 60 * 1000 * dUnit);
break;
case TU_Minute_15:
dateTime = d_ptr->m_leftTime.addMSecs(15 * 60 * 1000 * dUnit);
break;
case TU_Minute_10:
dateTime = d_ptr->m_leftTime.addMSecs(10 * 60 * 1000 * dUnit);
break;
case TU_Minute_5:
dateTime = d_ptr->m_leftTime.addMSecs(5 * 60 * 1000 * dUnit);
break;
case TU_Minute_3:
dateTime = d_ptr->m_leftTime.addMSecs(3 * 60 * 1000 * dUnit);
break;
case TU_Minute_1:
dateTime = d_ptr->m_leftTime.addMSecs(60 * 1000 * dUnit);
break;
case TU_Second_30:
dateTime = d_ptr->m_leftTime.addMSecs(30 * 1000 * dUnit);
break;
case TU_Second_10:
dateTime = d_ptr->m_leftTime.addMSecs(10 * 1000 * dUnit);
break;
case TU_Second_1:
dateTime = d_ptr->m_leftTime.addMSecs(1000 * dUnit);
break;
case TU_MSecond_500:
dateTime = d_ptr->m_leftTime.addMSecs(500 * dUnit);
break;
case TU_MSecond_100:
dateTime = d_ptr->m_leftTime.addMSecs(100 * dUnit);
break;
case TU_MSecond_50:
dateTime = d_ptr->m_leftTime.addMSecs(50 * dUnit);
break;
case TU_MSecond_10:
dateTime = d_ptr->m_leftTime.addMSecs(10 * dUnit);
break;
default:
break;
}
return dateTime;
}
void TimeLineItem::setLineColor(QColor color)
{
d_ptr->m_lineColor = color;
}
void TimeLineItem::setScaleSize(int size)
{
d_ptr->m_scaleSize = size;
}
void TimeLineItem::setState(DisplayState state)
{
d_ptr->m_curState = state;
}
void TimeLineItem::setTime(QDateTime time)
{
if(time > QDateTime::currentDateTime())
return;
d_ptr->m_curTime = time;
}
void TimeLineItem::zoomIn()
{
d_ptr->m_scaleFactor++;
if(d_ptr->m_scaleFactor > (int)TU_MSecond_10)
d_ptr->m_scaleFactor = (int)TU_MSecond_10;
d_ptr->m_curTimeUnit = (TimeUnit)d_ptr->m_scaleFactor;
prepareGeometryChange();
//qDebug() << d_ptr->m_curTimeUnit;
}
void TimeLineItem::zoomOut()
{
d_ptr->m_scaleFactor--;
if(d_ptr->m_scaleFactor < 1)
d_ptr->m_scaleFactor = 1;
d_ptr->m_curTimeUnit = (TimeUnit)d_ptr->m_scaleFactor;
prepareGeometryChange();
//qDebug() << d_ptr->m_curTimeUnit;
}
} // namespace TimeLine

View File

@ -0,0 +1,69 @@
#ifndef TIMELINEITEM_H
#define TIMELINEITEM_H
#include "timeLine_globals.h"
#include <QGraphicsObject>
#include <QDateTime>
namespace TimeLine
{
enum TimeUnit
{
TU_Year = 1, //yyyy
TU_Month, //yyyy/M/1
TU_Day, //M/d
TU_Hour, //M/d/hh
TU_Minute_30, //hh:mm
TU_Minute_20, //hh:mm
TU_Minute_15, //hh:mm
TU_Minute_10, //hh:mm
TU_Minute_5, //hh:mm
TU_Minute_3, //hh:mm
TU_Minute_1, //hh:mm
TU_Second_30, //hh:mm:ss
TU_Second_10, //hh:mm:ss
TU_Second_1, //hh:mm:ss
TU_MSecond_500, //mm:ss:z
TU_MSecond_100, //mm:ss:z
TU_MSecond_50, //mm:ss:z
TU_MSecond_10 //mm:ss:z
};
class TimeLineItemPrivate;
class TimeLineItem : public QGraphicsObject
{
Q_OBJECT
public:
explicit TimeLineItem();
virtual ~TimeLineItem();
virtual QRectF boundingRect() const;
void updateBoundingRect(const QRect&);
void setLineColor(QColor);
void setScaleSize(int);
void setState(DisplayState);
void setTime(QDateTime);
void zoomIn();
void zoomOut();
protected:
virtual void paint(QPainter*, const QStyleOptionGraphicsItem*, QWidget*);
private:
void drawScaleLine(QPainter*);
void drawTimeText(QPainter*, int);
QDateTime calculateLeftTime(); //计算当前时间左侧第一个需要输出展示的时间点
int calculateLeftTimePos(); //计算左侧时间点的坐标位置
QDateTime calculateTime(int); //计算坐标点所对应的时间
private:
TimeLineItemPrivate* d_ptr;
friend class TimeLineWidget;
};
} // namespace TimeLine
#endif

View File

@ -1,26 +1,32 @@
#include "timeLineWidget.h"
#include "timeLineItem.h"
#include <QGraphicsScene>
#include <QColor>
namespace TimeLine
{
#include <QDateTime>
#include <QWheelEvent>
class TimeLineWidgetPrivate
{
public:
QGraphicsScene* m_pScene;
QColor m_background_color;
QColor m_timeline_color;
TimeLine::TimeLineItem* m_timeLineItem;
};
TimeLineWidget::TimeLineWidget(QWidget *parent)
: QGraphicsView(parent)
, d_ptr(new TimeLine::TimeLineWidgetPrivate)
, d_ptr(new TimeLineWidgetPrivate)
{
d_ptr->m_pScene = new QGraphicsScene;
setScene(d_ptr->m_pScene);
d_ptr->m_timeLineItem = new TimeLine::TimeLineItem();
d_ptr->m_pScene->addItem(d_ptr->m_timeLineItem);
setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
setFrameShape(NoFrame);
}
TimeLineWidget::~TimeLineWidget()
@ -30,7 +36,8 @@ TimeLineWidget::~TimeLineWidget()
void TimeLineWidget::resizeEvent(QResizeEvent* e)
{
d_ptr->m_pScene->setSceneRect(-width() / 2, -height() / 2, width(), height());
d_ptr->m_timeLineItem->updateBoundingRect(childrenRect());
}
void TimeLineWidget::mousePressEvent(QMouseEvent* e)
{
@ -46,18 +53,35 @@ void TimeLineWidget::mouseReleaseEvent(QMouseEvent* e)
}
void TimeLineWidget::wheelEvent(QWheelEvent* e)
{
if (e->angleDelta().y() > 0)
d_ptr->m_timeLineItem->zoomIn();
else
d_ptr->m_timeLineItem->zoomOut();
}
void TimeLineWidget::updateAll()
{
d_ptr->m_pScene->update();
}
void TimeLineWidget::setBackground(QColor color)
{
d_ptr->m_background_color = color;
setBackgroundBrush(QBrush(color, Qt::SolidPattern));
}
void TimeLineWidget::setTimelineColor(QColor color)
{
d_ptr->m_timeline_color = color;
setBackgroundBrush(QBrush(color, Qt::SolidPattern));
d_ptr->m_timeLineItem->setLineColor(color);
}
void TimeLineWidget::setTimeScaleSize(int size)
{
d_ptr->m_timeLineItem->setScaleSize(size);
}
void TimeLineWidget::setCurrentTime(QDateTime time)
{
}
} // namespace TimeLine

View File

@ -3,20 +3,20 @@
#include <QGraphicsView>
namespace TimeLine
{
class TimeLineWidgetPrivate;
class TimeLineWidget : public QGraphicsView
{
Q_OBJECT
public:
explicit TimeLineWidget(QWidget *parent = 0);
virtual ~TimeLineWidget();
void setBackground(QColor);
void setTimelineColor(QColor);
void setTimeScaleSize(int); //设置时间刻度大小(像素)
void setCurrentTime(QDateTime);
protected:
virtual void resizeEvent(QResizeEvent*) override;
@ -26,9 +26,10 @@ protected:
virtual void wheelEvent(QWheelEvent*) override;
private:
void updateAll();
TimeLineWidgetPrivate* d_ptr;
}; // class TimeLineWidget
} // namespace TimeLine
#endif

View File

@ -0,0 +1,15 @@
#ifndef TIMELINE_GLOBALS_H
#define TIMELINE_GLOBALS_H
namespace TimeLine
{
enum DisplayState
{
RealTime,
Historical
};
}
#endif