英语网站大全免费,河北建设厅网站技术电话,wordpress插件cdn,深圳 高端网站建设宝安文章目录 一#xff0e;前言二#xff0e;预览三#xff0e;软件组成开发心得1.样式使用方法2.左侧表格实现3.设计4.学习5.体验效果 四#xff0e;代码分享1.环形渐变进度组件2.自定义图片的背景组件 五#xff0e;总结 大小#xff1a;60.9 M#xff0c;软件… 文章目录 一前言二预览三软件组成开发心得1.样式使用方法2.左侧表格实现3.设计4.学习5.体验效果 四代码分享1.环形渐变进度组件2.自定义图片的背景组件 五总结 大小60.9 M软件安装包放在了这里! 一前言
本次仍然给大家带来我使用Pyqt5开发的大屏可视化解决方案我提供的可视化方案均不依赖于浏览器所有组件都是QWidget及其子类大家可以放心学习交流
二预览
下面我将截图展示一下本次系统的主要功能 本次软件只有一屏下面截图为软件主界面 贴一张动图展示启动后的效果
三软件组成开发心得
1.样式使用方法 大屏可视化方案参考了web的前端样式通过借鉴其可视化方案使用Pyqt5绘制QWidgets的方式实现同样的效果。本软件启动后会自动最大化软件不包含标题栏通过按下键盘上的ESC退出。 2.左侧表格实现 本次的可视化二维表格不是使用的QTableWidget 而是使用的网格布局通过加入水平分割线将数据与数据、表头与数据分割开来形成表头和数据对应的表格也算是笔者的一个创新尝试。 3.设计 软件整体是垂直布局是最上方的头部与下方内容区水平布局下方的水平布局包括三个QWidget设置了水平布局水平比例为1:2:1尽可能将我们的可视化效果占比达到最大每个内容区包括2~3个内部组件在代码上使用不同的类来区分不同的区域。 4.学习 在本次代码开发撰写当中学习到了geojson数据的使用细心的读者可以发现中间的地图是有交互效果的具体来说是把鼠标放置到对应的区鼠标所在的区域会变色这里说下地图的绘制数据来源是https://geojson.hxkj.vip/大家可以在这里根据城市、地区名字or区号下载对应的geojson这样我们的数据就准备好了然后进行地图的绘制我们选择“重写PaintEvent”的方式按照经纬度绘制地图具体来说可以通过传入不同的geojson数据来绘制不同的地图比如下面的北京地图 5.体验效果
一款成品的大屏可视化方案是存在交互效果的我们的效果具体体现在 启动LCD数据变化动画 启动条形图数据变化动画 地图鼠标交互效果 地球外围点、线旋转效果 整体颜色风格效果 实时时间更新
四代码分享
这里和大家分享单个组件代码
1.环形渐变进度组件
class ProgressCircle(QWidget):进度值圆环组件def __init__(self, pNone):super().__init__(p)self.ui_init()self.ani_init()def ui_init(self):self._progress 0 # 当前进度初始化为0def ani_init(self):# 创建属性动画self.animation QPropertyAnimation(self, bprogress)self.animation.start() # 启动动画# 创建 progress 属性def get_progress(self):return self._progressdef set_progress(self, value):self._progress valueself.update() # 每次更新 progress 时触发绘制progress pyqtProperty(float, get_progress, set_progress) # 定义 progress 属性def set_target_progress(self, target_progress):外部设置目标进度值并触发动画# 创建新的属性动画self.animation.stop() # 停止当前动画self.animation QPropertyAnimation(self, bprogress)self.animation.setDuration(800) # 设置动画时长self.animation.setStartValue(self._progress) # 设置动画起始值为当前进度self.animation.setEndValue(target_progress) # 设置动画结束值为目标进度self.animation.start() # 启动新的动画def resizeEvent(self, event):# 根据窗口大小动态调整圆环的大小并保证边缘有 5px 的间隙margin 5 # 设置边缘的间隙为 5pxself.circle_diameter min(self.width(), self.height()) - 2 * margin # 留出 5px 边距self.circle_center self.rect().center() # 获取窗口中心点def paintEvent(self, event):painter QPainter(self)painter.setRenderHint(QPainter.Antialiasing)# 计算圆环的位置和大小radius self.circle_diameter / 2rect QRectF(self.circle_center.x() - radius, self.circle_center.y() - radius, self.circle_diameter,self.circle_diameter)start_angle 90 * 16 # 从正上方开始以16进制计算角度span_angle -(360 * self._progress / 100) * 16 # 根据当前进度百分比调整角度# 绘制未划过的部分背景pen QPen(QColor(26, 68, 112), 10) # 未划过部分的颜色painter.setPen(pen)painter.drawArc(rect, start_angle, 360 * 16) # 完整的圆环背景# 渐变色设置已划过的部分gradient QLinearGradient(self.circle_center.x(), self.circle_center.y(), self.circle_center.x() radius,self.circle_center.y())gradient.setColorAt(0, QColor(3, 202, 251)) # 渐变色的起始颜色gradient.setColorAt(1, QColor(51, 127, 237)) # 渐变色的结束颜色# 设置渐变的画笔pen QPen(gradient, 6) # 使用渐变色绘制圆环painter.setPen(pen)painter.drawArc(rect, int(start_angle), int(span_angle)) # 进度部分# 绘制文本进度百分比painter.setPen(QColor(13, 132, 242)) # 内层文字颜色设置为 rgb(13, 132, 242)painter.setFont(QFont(微软雅黑, 16))text f{int(self._progress)}% # 显示整数进度text_rect self.rect()painter.drawText(text_rect, Qt.AlignCenter, text)
2.自定义图片的背景组件
class BGWidgetBase(QWidget):自定义背景的组件def __init__(self, pNone, bg_pic):super(BGWidgetBase, self).__init__(p)self.bg_pic bg_picself.setAttribute(Qt.WA_TranslucentBackground, True)def set_bg_pic(self, bg_pic):self.bg_pic bg_picself.repaint()self.update()def paintEvent(self, event):super(BGWidgetBase, self).paintEvent(event)painter QPainter(self)painter.setRenderHint(QPainter.Antialiasing, True)painter.setRenderHint(QPainter.SmoothPixmapTransform, True)pixmap QPixmap(self.bg_pic)painter.drawPixmap(QRect(0, 0, self.width(), self.height()), pixmap)painter.end()
五总结
本次和大家分享了我开发的大屏可视化-传染病监督平台这是一款我比较满意的作品和大家分享了部分设计细节以及代码大家能给我点个赞么~
