Design and implementation of district heating network monitoring system for undergraduate graduation project

Design and implementation of district heating network monitoring system (undergraduate design)


Direct effect:
①Landing page:


②Registration page

Insert picture description here


③Home page

Insert picture description here
Insert picture description here


Insert picture description here

④Alarm area

Insert picture description here


⑤Parameter zone

Insert picture description here


Insert picture description here


⑥Map and process

Insert picture description here


This design is a graduate design for undergraduates. The subject is "Design and Implementation of District Heating Network Monitoring System". It has front-end and back-end data interaction functions and can display data in real time. The front-end uses the bootstrap framework, and the back-end uses flask for data interaction. All data used depends on the database. The following are the specific implementation functions and steps.

One login verification

Like the QQ and WeChat we usually use, you need your own account and password to enter, and these account information are stored in the database. If this design randomly enters the user name and password on the login page, it is impossible to log in to the home page. When you don't have an account, click the registration link to register, you need to enter the user name, email address, and password in the form, and click the submit button to return to the login page. After entering the correct account and password, log in to the home page of the system. For example, the account information that already exists in the database can log in to the system homepage correctly only when the account information that matches it correctly is entered.

Insert picture description here


Insert picture description here


Front-end form code:

<div class="col-lg-6">
              <div class="form d-flex align-items-center">
                <div class="content">
                  <form method="post" class="form-validate mb-4" action="/index">
                    <div class="form-group">
                      <input id="login-username" type="text" name="loginUsername" required data-msg="请输入用户名" class="input-material">
                      <label for="login-username" class="label-material">用户名</label>
                    </div>
                    <div class="form-group">
                      <input id="login-password" type="password" name="loginPassword" required data-msg="请输入密码" class="input-material">
                      <label for="login-password" class="label-material">密码</label>
                    </div>
                    <button type="submit" class="btn btn-primary">登陆</button>
                  </form><a href="#" class="forgot-pass">忘记密码?</a><br><small>还没有账户? </small><a href="/register" class="signup">注册</a>
                </div>
              </div>

Back-end code:

@app.route('/')
def login():
    return render_template('login.html')

@app.route('/index',methods=['GET', 'POST'])
def index():
    referer=request.headers.get('referer')
    print(referer)
    if request.method=='GET':
        return render_template('login.html')
    else:
        username=int(request.form.get("loginUsername"))
        password=str(request.form.get("loginPassword"))
        cookies=request.cookies
        #print(username, password)
        #print(db.session.query(User).all())
        users=db.session.query(User).all()
        flag = 0
        for u in users:
            if username == u.username and password==u.password:
                print(u.username,u.email,u.password)
                flag=1
                break
        #验证成功
        if flag==1:
            return render_template('index.html')
        else:
            return redirect('/')

Like the common stock market K-line graphs and trend graphs of various indicators in university laboratories are all real-time, the same is true during the operation of the heat network, and real-time line graphs need to be used. Canvas can accomplish this task, but we have a better choice, that is echarts.js, the download link echarts.min.js can find the chart type that suits our design needs on its official website. The official website of echarts

Insert picture description here


only needs to copy the selected code and modify it to meet most design requirements. If you are not very familiar with echarts , you can learn it in the echarts tutorial .

Three historical data

In many cases, we cannot obtain real-time data. Just like this design, we cannot obtain heat network operating data, so we use the random module for simulation.

Look at the front-end code:

<section class="no-padding-top">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-6">
                <div class="block margin-bottom-sm">
                  <div class="title"><strong>浦东新区换热站一次管网热水参数</strong></div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>温度(℃)</th>
                          <th>压力(Mpa)</th>
                          <th>流量(t/h)</th>
                          <th>是否正常运行(1正常0非正常)</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for p in params.Pudongxinqu1 %}
                        <tr>
                          <!--th scope="row"></th-->
                          <th scope="row">{{ p.shijian }}</th>
                                <td>{{ p.wendu}}</td>
                                <td>{{ p.yali }}</td>
                                <td>{{ p.liuliang }}</td>
                                <td>{{ p.yunxingzhuangtai }}</td>
                        </tr>
                      {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="block margin-bottom-sm">
                  <div class="title"><strong>浦东新区换热站二次管网热水参数</strong></div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>温度(℃)</th>
                          <th>压力(Mpa)</th>
                          <th>流量(t/h)</th>
                          <th>是否正常运行(1正常0非正常)</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for p in params.Pudongxinqu2 %}
                        <tr>
                          <!--th scope="row"></th-->
                          <th scope="row">{{ p.shijian }}</th>
                                <td>{{ p.wendu}}</td>
                                <td>{{ p.yali }}</td>
                                <td>{{ p.liuliang }}</td>
                                <td>{{ p.yunxingzhuangtai }}</td>

                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="block margin-bottom-sm">
                  <div class="title"><strong>杨浦区换热站一次管网热水参数</strong></div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>温度(℃)</th>
                          <th>压力(Mpa)</th>
                          <th>流量(t/h)</th>
                          <th>是否正常运行(1正常0非正常)</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for p in params.Yangpuqu1 %}
                        <tr>
                          <!--th scope="row"></th-->
                          <th scope="row">{{ p.shijian }}</th>
                                <td>{{ p.wendu}}</td>
                                <td>{{ p.yali }}</td>
                                <td>{{ p.liuliang }}</td>
                                <td>{{ p.yunxingzhuangtai }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="block margin-bottom-sm">
                  <div class="title"><strong>杨浦区换热站二次管网热水参数</strong></div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>温度(℃)</th>
                          <th>压力(Mpa)</th>
                          <th>流量(t/h)</th>
                          <th>是否正常运行(1正常0非正常)</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for p in params.Yangpuqu2 %}
                        <tr>
                          <!--th scope="row"></th-->
                          <th scope="row">{{ p.shijian }}</th>
                                <td>{{ p.wendu}}</td>
                                <td>{{ p.yali }}</td>
                                <td>{{ p.liuliang }}</td>
                                <td>{{ p.yunxingzhuangtai }}</td>

                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="block margin-bottom-sm">
                  <div class="title"><strong>松江区换热站一次管网热水参数</strong></div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>温度(℃)</th>
                          <th>压力(Mpa)</th>
                          <th>流量(t/h)</th>
                          <th>是否正常运行(1正常0非正常)</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for p in params.Songjiangqu1 %}
                        <tr>
                          <!--th scope="row"></th-->
                          <th scope="row">{{ p.shijian }}</th>
                                <td>{{ p.wendu}}</td>
                                <td>{{ p.yali }}</td>
                                <td>{{ p.liuliang }}</td>
                                <td>{{ p.yunxingzhuangtai }}</td>

                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="block margin-bottom-sm">
                  <div class="title"><strong>松江区换热站二次管网热水参数</strong></div>
                  <div class="table-responsive"> 
                    <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>温度(℃)</th>
                          <th>压力(Mpa)</th>
                          <th>流量(t/h)</th>
                          <th>是否正常运行(1正常0非正常)</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for p in params.Songjiangqu2 %}
                        <tr>
                          <!--th scope="row"></th-->
                          <th scope="row">{{ p.shijian }}</th>
                                <td>{{ p.wendu}}</td>
                                <td>{{ p.yali }}</td>
                                <td>{{ p.liuliang }}</td>
                                <td>{{ p.yunxingzhuangtai }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="block">
                  <div class="title"><strong>闵行区换热站一次管网热水参数</strong></div>
                  <div class="table-responsive"> 
                    <table class="table table-striped table-hover">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>温度(℃)</th>
                          <th>压力(Mpa)</th>
                          <th>流量(t/h)</th>
                          <th>是否正常运行(1正常0非正常)</th>
                        </tr>
                      </thead>
                      {% for p in params.Minhangqu1 %}
                        <tr>
                          <!--th scope="row"></th-->
                          <th scope="row">{{ p.shijian }}</th>
                                <td>{{ p.wendu}}</td>
                                <td>{{ p.yali }}</td>
                                <td>{{ p.liuliang }}</td>
                                <td>{{ p.yunxingzhuangtai }}</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="block margin-bottom-sm">
                  <div class="title"><strong>闵行区换热站二次管网热水参数</strong></div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>温度(℃)</th>
                          <th>压力(Mpa)</th>
                          <th>流量(t/h)</th>
                          <th>是否正常运行(1正常0非正常)</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for p in params.Minhangqu2 %}
                        <tr>
                          <!--th scope="row"></th-->
                          <th scope="row">{{ p.shijian }}</th>
                                <td>{{ p.wendu}}</td>
                                <td>{{ p.yali }}</td>
                                <td>{{ p.liuliang }}</td>
                                <td>{{ p.yunxingzhuangtai }}</td>

                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-lg-12">
                <div class="block margin-bottom-sm"><a href="/static/download/basifu.csv" download="basifu.csv">点击下载历史数据</a></div>
              </div>
            </div>
          </div>
        </section>

In html, this design uses jinjia2 syntax to achieve rewriting.

Backend code:

@app.route('/charts')
def charts():
    Pudongxinqu1=db.session.query(pudongxinqu1).all()
    Pudongxinqu2=db.session.query(pudongxinqu2).all()
    Yangpuqu1 = db.session.query(yangpuqu1).all()
    Yangpuqu2 = db.session.query(yangpuqu2).all()
    Songjiangqu1 = db.session.query(songjiangqu1).all()
    Songjiangqu2 = db.session.query(songjiangqu2).all()
    Minhangqu1=db.session.query(minhangqu1).all()
    Minhangqu2 = db.session.query(minhangqu2).all()
    return render_template('charts.html',params=locals())

Four database establishment

Monitoring software has no data, just as there is no Jerusalem in the West. This design needs to establish the quyurewang database in MYSQL before using flask-sqlalchemy to configure the database.
Look at the back-end code:

from flask import Flask,request,render_template,redirect
from flask_sqlalchemy import SQLAlchemy #将sqlalchemy导入
import pymysql
import random,time
pymysql.install_as_MySQLdb()
app=Flask(__name__)
#app.config['SQLALCHEMY_DATABASE_URI']='mysql://usename:[email protected]:port/dbname'#配置数据库
app.config['SQLALCHEMY_DATABASE_URI']='mysql://root:[email protected]:3306/quyurewang'
app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN']=True#执行完操作自动提交
#创建SQLAICHEMY的实例
db=SQLAlchemy(app)#表示程序正在使用的数据库,也获得SQLALCHEMY的所有功能

class User(db.Model):#定义模型类名称,根据表名设定
    __tablename__="users"
    username=db.Column(db.Integer,primary_key=True)#属性名、数据类型、列选项
    email=db.Column(db.String(80),unique=True)
    password=db.Column(db.String(80),unique=True)
    
    def __init__(self,username,email,password):
        self.username=username
        self.email=email
        self.password=password
    
    def __repr__(self):
        return '<Users:%r>' %self.username

class Yuce(db.Model):
    __tablename__ = "yuce"
    shijian=db.Column(db.DateTime,primary_key=True)
    zhiliang=db.Column(db.Float)
    shunshizhiliang=db.Column(db.Float)
    tianqi=db.Column(db.Float)
    wendu=db.Column(db.Float)

    def __init__(self, shijian,zhiliang, shunshizhiliang,tianqi,wendu):
        self.shijian= shijian
        self.zhiliang = zhiliang
        self.shunshizhiliang = shunshizhiliang
        self.tianqi = tianqi
        self.wendu = wendu

    def __repr__(self):
        return '<shijian:%r>' % self.shijian

class pudongxinqu1(db.Model):
    __tablename__='pudongxinqu1'
    shijian=db.Column(db.String(80),primary_key=True)
    wendu=db.Column(db.Float)
    yali=db.Column(db.Float)
    liuliang=db.Column(db.Float)
    yunxingzhuangtai = db.Column(db.Integer)

    def __init__(self,shijian,wendu,yali,liuliang,yunxingzhuangtai):
        self.shijian=shijian
        self.wendu=wendu
        self.yali=yali
        self.liuliang=liuliang
        self.yunxingzhuangtai=yunxingzhuangtai
    def __repr__(self):
        return '<pudongxinqu1>' %self.shijian


class pudongxinqu2(db.Model):
    __tablename__ = 'pudongxinqu2'
    shijian = db.Column(db.String(80), primary_key=True)
    wendu = db.Column(db.Float)
    yali = db.Column(db.Float)
    liuliang = db.Column(db.Float)
    yunxingzhuangtai=db.Column(db.Integer)

    def __init__(self, shijian, wendu, yali, liuliang,yunxingzhuangtai):
        self.shijian = shijian
        self.wendu = wendu
        self.yali = yali
        self.liuliang = liuliang
        self.yunxingzhuangtai=yunxingzhuangtai

    def __repr__(self):
        return '<pudongxinqu2>' % self.shijian


class yangpuqu1(db.Model):
    __tablename__ = 'yangpuqu1'
    shijian = db.Column(db.String(80), primary_key=True)
    wendu = db.Column(db.Float)
    yali = db.Column(db.Float)
    liuliang = db.Column(db.Float)
    yunxingzhuangtai = db.Column(db.Integer)

    def __init__(self, shijian, wendu, yali, liuliang,yunxingzhuangtai):
        self.shijian = shijian
        self.wendu = wendu
        self.yali = yali
        self.liuliang = liuliang
        self.yunxingzhuangtai=yunxingzhuangtai

    def __repr__(self):
        return '<yangpuqu1>' % self.shijian


class yangpuqu2(db.Model):
    __tablename__ = 'yangpuqu2'
    shijian = db.Column(db.String(80), primary_key=True)
    wendu = db.Column(db.Float)
    yali = db.Column(db.Float)
    liuliang = db.Column(db.Float)
    yunxingzhuangtai = db.Column(db.Integer)

    def __init__(self, shijian, wendu, yali, liuliang,yunxingzhuangtai):
        self.shijian = shijian
        self.wendu = wendu
        self.yali = yali
        self.liuliang = liuliang
        self.yunxingzhuangtai=yunxingzhuangtai

    def __repr__(self):
        return '<yangpuqu2>' % self.shijian


class songjiangqu1(db.Model):
    __tablename__ = 'songjiangqu1'
    shijian = db.Column(db.String(80), primary_key=True)
    wendu = db.Column(db.Float)
    yali = db.Column(db.Float)
    liuliang = db.Column(db.Float)
    yunxingzhuangtai = db.Column(db.Integer)

    def __init__(self, shijian, wendu, yali, liuliang,yunxingzhuangtai):
        self.shijian = shijian
        self.wendu = wendu
        self.yali = yali
        self.liuliang = liuliang
        self.yunxingzhuangtai=yunxingzhuangtai

    def __repr__(self):
        return '<songjiangqu1>' % self.shijian


class songjiangqu2(db.Model):
    __tablename__ = 'songjiangqu2'
    shijian = db.Column(db.String(80), primary_key=True)
    wendu = db.Column(db.Float)
    yali = db.Column(db.Float)
    liuliang = db.Column(db.Float)
    yunxingzhuangtai = db.Column(db.Integer)

    def __init__(self, shijian, wendu, yali, liuliang,yunxingzhuangtai):
        self.shijian = shijian
        self.wendu = wendu
        self.yali = yali
        self.liuliang = liuliang
        self.yunxingzhuangtai=yunxingzhuangtai

    def __repr__(self):
        return '<songjiangqu2>' % self.shijian

class minhangqu1(db.Model):
    __tablename__ = 'minhangqu1'
    shijian = db.Column(db.String(80), primary_key=True)
    wendu = db.Column(db.Float)
    yali = db.Column(db.Float)
    liuliang = db.Column(db.Float)
    yunxingzhuangtai = db.Column(db.Integer)

    def __init__(self, shijian, wendu, yali, liuliang,yunxingzhuangtai):
        self.shijian = shijian
        self.wendu = wendu
        self.yali = yali
        self.liuliang = liuliang
        self.yunxingzhuangtai=yunxingzhuangtai

    def __repr__(self):
        return '<minhangqu1>' % self.shijian

class minhangqu2(db.Model):
    __tablename__ = 'minhangqu2'
    shijian = db.Column(db.String(80), primary_key=True)
    wendu = db.Column(db.Float)
    yali = db.Column(db.Float)
    liuliang = db.Column(db.Float)
    yunxingzhuangtai = db.Column(db.Integer)

    def __init__(self, shijian, wendu, yali, liuliang,yunxingzhuangtai):
        self.shijian = shijian
        self.wendu = wendu
        self.yali = yali
        self.liuliang = liuliang
        self.yunxingzhuangtai=yunxingzhuangtai

    def __repr__(self):
        return '<minhangqu2>' % self.shijian

Concluding remarks

I have been engaged in software development for a long time, and have received praise from a large number of undergraduate students majoring in computer science for many years. If you have undergraduate software design, you can add WeChat cuiliang1666457052.
The design and implementation of the district heating network monitoring system of the final draft of the design