工业监控项目实战1—UI

背景:随着国家工业2025战略的推进,工业互联网发展将会提速,将迎来一个新的发展时期,设备的在线监控IOT应用将越来越广,这个系列文章尝试用主流的互联网开发技术,在工业互联网的监控领用做一个基于B/S架构的探索。笔者对于工业互联网监控也有几点感受就是现在好多企业项目越来越多的采用WebGL做三维动画交互式监控内容越走越复杂、越做越炫,首页就是工厂的3D鸟瞰图,模拟工厂三维布局,演示虚拟工厂效果,对于参观访问者看起来的确高大上,但是对于熟悉现在工艺设备的操作人员来说,反而不是很实用,直观2D线条图很容易方便查看产线设备的整体运行情况,交互式3D画面更适合培训和参观。所以估计缩略的2D线条图的监控画面还会长期与3D监控图并存,用来监控简化的产线全局运行工况。

  前面章节我们演示了如何从一个需求(问题)开始,然后,拆解需求(问题);其次,解决拆解需求(问题)的点;再次,通过的不断技术摸索和迭代找到一个个合理的解决需求的方法和手段,最终,完成了这个需求(问题)的技术验证原型。接下来的章节我们将演示原型是如何通过演化,逐步的变成一个真正的项目的实战过程。

解题思路:如验证原型一样,先实现静态界面的展示效果,然后动态刷新变化的3个监控tag点的数字就基本上解决了上述需求(问题)。

1.工业监控项目实战1UI

  现在回到一开始的需求(问题)点,下面这张监控图。如很多开发者的思路一样,第一步也是先从UI界面的绘制开始,用html描述语言完成画面的静态绘制,效果如下图:

1.1. 新建项目和环境准备

  本小节起开始为了方便以及与笔者后面的django内容关联,文中的所有案例将采用python3.6和django 2.1作为基本运行环境来演示相关程序代码。

  前面的章节我们以简单图文的形式知识介绍了如何在IDE环境里创建一个新的项目,现在我们通过VS Communit 2019 File->new->project 菜单创新的Blank Django Web Project项目名为CollectorSvr,如下步骤:

  1. 新建项目

  2. 选择选择 Blank Django Web Project 项目类型

  3. IDE python环境安装pip install django==2.1 (不熟悉的参考前面文章 websocket实时的监控画面)

  4. 最后把解决方案重命名为demo,后面系列文章中涉及到的其它项目我们将在添加到demo解决方案下面。

1.1.1. 项目添加Django APP

  现在django项目还需要一个实现具体业务的app,来编写我的业务逻辑和UI,为了简化案例的复杂度,UI和后台url将都编写在CollectorSvr上。

  让我们通过IDE环境在项目中添加一个名为Collector Django APP,如下图:

  到这步骤我们就换成了基于 python3.6和django 2.1项目的准备工作,接下来我们来演示如何一步一步的实现本文开头的监控界面效果。项目结构如下图:

1.2. Bootstrap前端组件库

  本文采用Bootstrap作为前端展现的组件库, Bootstrap是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包。利用 Bootstrap 提供的 Sass 变量和混合(mixins)、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件,能够让你快速地开发出产品原型或构建整个 app。

官网网址:https://www.bootcss.com/

版本:v4.4.1

  首先,在上面创建的Collector app templates目录下中添加一个新的html页面文件,命名为tank4C9.html,并采用国内cdn的方式引用Bootstrap 组件css和js文件。

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

  然后,本小节我们直接背景图和bootstrap行列布局来实现数据在背景图上的布局效果,我们把原图修改成下图:

  图片拖放到Collector app的静态文件架中\static\img,这个两个目录需要通过IDE环境在Collector app创建,如图:

  其次,tank4C9.html监控界面UI中,主要采用class="row"和class="col-sm 行列方式来实现显示文本的布局工作,col-sm-5 数字5 是列的宽度,也采用了 作为占位符。

页面完整实现代码:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Tank 4C9</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <style type="text/css">
    .bg {
        background:url(../../static/img/tank4C9-1.png) no-repeat left;
        background-size:contain;

    }

    </style>

</head>
<body>
    <div class="container-fluid bg" style="height:455px;background:url(../../static/img/tank4C9-1.png) no-repeat left;background-size:contain;">
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-sm"></div>

            <div class="col-sm"><strong class="text-warning">100</strong><strong> mm/sΛ2</strong></div>
            <div class="col-sm"></div>

        </div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-sm"></div>

            <div class="col-sm-2"> <strong class="text-success" >200</strong><strong> kWh</strong></div>
            <div class="col-sm-9"></div>

        </div>

        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>

        <div class="row">
            <div class="col-sm-5"></div>

            <div class="col-sm-2"><strong class="text-danger" >300</strong><strong>  mm/sΛ2</strong></div>
            <div class="col-sm-5"></div>

        </div>

    </div>
</body>
</html>

1.3. 发布django项目urls

页面tank4C9.html代码完成后,需要通过django项目把app页面发布urls上,这样调试运行项目后,我们wo才能通过url访问页面查看页面访问效果。

  1. 修改Collector app views文件添加tank4C9函数

def tank4C9(request):
    assert isinstance(request, HttpRequest)
    return render(
        request,‘Collector/tank4C9.html‘,)

  2. 修改项目settings文件INSTALLED_APPS,添加Collector app

INSTALLED_APPS = [
    # Add your apps here to enable them
    ‘django.contrib.admin‘,
    ‘django.contrib.auth‘,
    ‘django.contrib.contenttypes‘,
    ‘django.contrib.sessions‘,
    ‘django.contrib.messages‘,
    ‘django.contrib.staticfiles‘,
    ‘Collector‘,
]

  3. 修改项目urls文件urlpatterns ,发布tank4C9 path

from django.urls import path
from Collector import views

urlpatterns = [
    # Uncomment the next line to enable the admin:
    #path(‘admin/‘, admin.site.urls)
    path(‘tank4C9/‘, views.tank4C9),

]

1.4. 调试浏览静态页面

  现在调试运行项目我们就可以本地浏览完成的页面效果了,为了调试方便笔者同样设置了项目的调试端口:8090。

  现在按F5运行IDE调试环境,就可以在弹出的默认浏览器地址栏输入页面访问地址:http://127.0.0.1:8090/tank4C9/ 查看页面效果了。

  页面还是一个数字不会刷新的静态页面,但是监控效果图已经到达了初步的显示效果,接下来我们采用前面原型的ajax轮询实现3个监控tag位号的数字动态刷新。

1.5. 轮询的动态页面

我们Collector APP提供一个webAPI 来返回动态的模拟数据函数,通过引入random来模拟变化的设备tag位号值,并返回json格式数据到请求端。

  1. Collector APviews 增加函数getTank4C9Data 代码如下:

import random
def getTank4C9Data(request):

    tank4C9={
        ‘Status‘:  random.randint(0,1), #设备运行状态
        ‘OverheadFlow‘:random.randint(1,10) ,#‘顶流量‘,
        ‘ButtomsFlow‘: random.randint(1,10), #‘低流量‘
        ‘Power‘:  random.randint(10000,100000), #功率
    } 

    return HttpResponse( json.dumps(tank4C9));

  2. 修改项目urls文件urlpatterns ,发布getTank4C9Data path

from django.urls import path
from Collector import views

urlpatterns = [
    # Uncomment the next line to enable the admin:
    #path(‘admin/‘, admin.site.urls)
    path(‘tank4C9/‘, views.tank4C9),
    path(‘getTank4C9Data/‘, views.getTank4C9Data),

]

  项目调试状态我们可以通过浏览器直接访问url查看webAPI结果

http://127.0.0.1:8090/getTank4C9Data/

1.5.1. 参考原型的ajax轮询修改tank4C9.html代码实现ajax轮询

  页面代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Tank 4C9</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>-->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <style type="text/css">
    .bg {
        background:url(../../static/img/tank4C9-1.png) no-repeat left;
        background-size:contain;

    }

    </style>

</head>
<body>
    <div class="container-fluid bg" style="height:455px;background:url(../../static/img/tank4C9-1.png) no-repeat left;background-size:contain;">
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-sm"></div>

            <div class="col-sm"><strong class="text-warning" id="OverheadFlow">100</strong><strong> mm/sΛ2</strong></div>
            <div class="col-sm"></div>

        </div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-sm"></div>

            <div class="col-sm-2"> <strong class="text-success" id="Power">200</strong><strong> kWh</strong></div>
            <div class="col-sm-9"></div>

        </div>

        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>
        <div class="row">&nbsp;</div>

        <div class="row">
            <div class="col-sm-5"></div>

            <div class="col-sm-2"><strong class="text-danger" id="ButtomsFlow">300</strong><strong>  mm/sΛ2</strong></div>
            <div class="col-sm-5"></div>

        </div>

    </div>

    <script>

       //JQuery 代码入口
        $(document).ready(function(){

            setInterval("getData()",1000);

        });

        function getData() {
            //模拟异步从后台获得值
            $.ajax({
                url: "/getTank4C9Data/", success: function (result) {
                    data = JSON.parse(result);

                    $("#OverheadFlow").html(data.OverheadFlow);
                    $("#ButtomsFlow").html(data.ButtomsFlow);
                    $("#Power").html(data.Power);
            }});
    }

    </script>

</body>
</html>

  调试运行

1.6.总

  本小节我们演示了监控项目实战的UI界面效果和如何实现数据从后台到UI端传输,同时,实现了基于ajax轮询的动态页面效果,文末的gif也显示了动态刷新的页面监控情况。传输数据我们用了主流的Json格式,便于在UI同通过JSON对数据进行解析和使用。当然本文的案例界面简洁明快。

  下一篇我们将进一步对数据格式进行封装,并进一步通过模拟读取OPC服务的tag位号值来模拟通过OPC DA完成读取设备工艺数据的实时监控tag值。

原文地址:https://www.cnblogs.com/haozi0804/p/12564080.html

时间: 2024-10-05 03:09:33

工业监控项目实战1—UI的相关文章

项目实战——企业级Zabbix监控实战(一)

项目实战--企业级Zabbix监控实战 实验一:Zabbix监控的搭建 1.实验准备 centos系统服务器3台. 一台作为监控服务器, 两台台作为被监控节点, 配置好yum源. 防火墙关闭. 各节点时钟服务同步. 各节点之间可以通过主机名互相通信. 1)所有机器关闭防火墙和selinux iptables -F && setenforing 2)根据架构图,实验基本设置如下: 2.Zabbix的安装 1)更新我们的yum仓库 我们去官网下载一个包zabbix-release-3.4-2.

python基础项目实战:监控当前联网状态详情

介绍一个利用Python监控当前联网状态情况的python代码,它可以清楚地知道,你的电脑网络是否是链接成功或失败,通俗的说,就是查看你的电脑有木有网,代码如下: 调用系统网络诊断 监控网络是否链接成功 大家在学python的时候肯定会遇到很多难题,以及对于新技术的追求,这里推荐一下我们的Python学习扣qun:784758214,这里是python学习者聚集地!!同时,自己是一名高级python开发工程师,从基础的python脚本到web开发.爬虫.django.数据挖掘等,零基础到项目实战

【项目实战派】图像处理项目硬件选型

[项目实战派]图像处理项目的硬件平台选型 一直以来我都对嵌入式系统比较感兴趣,因为感到图像处理最终还是要走向便携式.移动化的.这里讲自己对图像处理项目的硬件平台选型这块的想法进行交流,欢迎交流.批评. 一.典型图像处理系统构建 ①相机与镜头--这部分属于成像器件,通常的视觉系统都是由一套或者多套这样的成像系统组成,如果有多路相机,可能由图像卡切换来获取图像数据,也可能由同步控制同时获取多相机通道的数据.根据应用的需要相机可能是输出标准的单色视频(RS-170/CCIR).复合信号(Y/C).RG

Kafka项目实战-用户日志上报实时统计之应用概述

1.概述 本课程的视频教程地址:<Kafka实战项目之应用概述> 本课程是通过一个用户实时上报日志来展开的,通过介绍 Kafka 的业务和应用场景,并带着大家搭建本 Kafka 项目的实战开发环境.下面我们来看看本课程有哪些课时,如下图所示: 接下来,我们开始第一课时的学习:<Kafka 回顾>. 2.内容 2.1 Kafka 回顾 本课时简述 Kafka 平台部署的注意事项,以及 Kafka 在企业中的业务场景和应用场景.让大家了解 Kafka 在企业中的使用. 本课时主要包含以

进阶学习项目实战链接

进阶学习目录 Python Django Ansible Playbook自动化运维项目实战 https://pan.baidu.com/s/1MAz_sNypeDSySQCdLiOuDw 顶级资深工程师深度讲解Go语言开发入门到精通 Go编程爬虫实战视频 https://pan.baidu.com/s/1nx82k7mOn8ErlPSsCdLfTw Zabbix监控系统深度实践 https://pan.baidu.com/s/1v3bAFqhk890KokIsmu3CMQ Spring Boo

angularJs项目实战!01:模块划分和目录组织

近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap + D3 + requirejs 的架构来实现它.angularjs早在去年6月份我就有所接触,将它应用在实验室项目的个别页面中,11月份在新浪的时候也将其推荐给了所在云事业部项目组.项目组老大程辉等人都是很有技术敏感性的人,大胆地采纳了我的建议,将之应用于原本使用dojo开发的项目前端模块上.然

基于Hadoop离线大数据分析平台项目实战

基于Hadoop离线大数据分析平台项目实战  课程学习入口:http://www.xuetuwuyou.com/course/184 课程出自学途无忧网:http://www.xuetuwuyou.com 课程简介: 某购物电商网站数据分析平台,分为收集数据.数据分析和数据展示三大层面.其中数据分析主要依据大数据Hadoop生态系统常用组件进行处理,此项目真实的展现了大数据在企业中实际应用. 课程内容 (1)文件收集框架 Flume ①Flume 设计架构.原理(三大组件) ②Flume 初步使

iOS开发——使用技术OC篇&amp;项目实战总结之开发技巧

项目实战总结之开发技巧 本文收集了25个关于可以提升程序性能的提示和技巧 1.使用ARC进行内存管理 2.在适当的情况下使用reuseIdentifier 3.尽可能将View设置为不透明(Opaque) 4.避免臃肿的XIBs 5.不要阻塞主线程 6.让图片的大小跟UIImageView一样 7.选择正确的集合 8.使用GZIP压缩 9.重用和延迟加载View 10.缓存.缓存.缓存 11.考虑绘制 12.处理内存警告 13.重用花销很大的对象 14.使用Sprite Sheets 15.避免

项目实战,LANMP+NGINX+SQUID

项目用到的服务: LAMP+nginx+squid+代理MYSQL+rsync 搭建LAMP平台,是目前非常流行的Web开发平台,成本低廉,扩展能力好,灵活,安全性高, 深受企业和管理人员的喜爱,容易形成整体的系统结构     nginx实现了整体网络的负载均衡,还以搭建存放一些静态网页,提高客户端对静态网页的访问请求时间     最后通过squid做整个网络的代理人,提高网站的访问都提高速度(缓冲服务),并且提高网络的安全性     myslq主主结构为整体网络数据作实时备份,然后通过mysl