REACT学校供水系统智能可视化--论文

目 录

摘要. II

ABSTRACT III

1 研究的目的和意义. 1

1.1 研究目的. 1

1.2 研究意义. 1

2 国内外研究现状及研究假设. 2

2.1 国内外研究现状. 2

2.2 主要内容. 3

3 实证分析与结果. 3

3.1 数据来源. 3

3.2 相关技术综述. 3

3.3 架构设计. 4

3.3.1 总架构设计. 4

3.3.2 数据流层设计. 5

3.4模块功能解析. 6

3.4.1 CenterPage组件. 6

3.4.2 LeftPage组件. 7

3.4.3 RightPage组件. 8

4 结论与建议. 10

4.1 主要研究结论. 10

4.2 提出建议. 10

参考文献. 11

基于REACT对学校供水系统智能可视化管理

摘要

随着学校供水量不断上升，目前学校的供水已成为城市里面的主要大户，然而由于监管不当学校庞大的用水量有一半是被浪费掉的，多因素造成让水流过大、过长，那么如何对高校进行系统化管理成为校园核心问题之一。互联网技术的进步与发展，让Web前端进入新时代，以组件化为代表的开发方式已逐渐成为前端领域的主流趋势。本文对前端组件的数据获取及管理复杂化的问题进行了综合分析，基于 React技术为核心，以Echarts、DataV、Dva技术相结合制定出一套对组件数据实现大屏可视化的管理方案。在构建大规模应用时，由于组件数量的庞大和业务规则的复杂化，加大了前端系统的构建难度，不利于系统的扩展和迭代，也增加了企业对系统后期的开发和维护成本。该方案用于在前端组件化开发中，简化数据获取及管理的复杂度，并提升组件对功能逻辑的调用能力，实现节水的最终目的，迈入智慧校园的生态。

关键词：React 技术，组件模型，异步控制，Dva

 Intelligent visual management of school water supply system based on react

ABSTRACT

With the continuous rise of school water supply, the school water supply has become the main household in the city. However, due to improper supervision, half of the huge water consumption of the school is wasted. Many factors cause the water flow to be too large and too long, so how to systematically manage colleges and universities has become one of the core problems of the campus. With the progress and development of Internet technology, the web front-end has entered a new era. The development method represented by component has gradually become the mainstream trend in the front-end field. This paper comprehensively analyzes the complexity of data acquisition and management of front-end components. Based on react technology and the combination of echarts, datav and DVA technology, a set of management scheme for realizing large screen visualization of component data is formulated. When building large-scale applications, due to the large number of components and the complexity of business rules, it increases the difficulty of building the front-end system, which is not conducive to the expansion and iteration of the system, but also increases the later development and maintenance cost of the system. The scheme is used to simplify the complexity of data acquisition and management in the front-end component development, improve the calling ability of components to functional logic, realize the ultimate goal of water saving and enter the ecology of smart campus.

Key words: react technology, component model, asynchronous control, dva

1 研究的目的和意义

1.1 研究目的

人们用水表记录供水用量的数据，但如今传统水表已经不能为高速腾飞的社会来服务了，在数据时代发展的要求下，大存储量的数据涌入和更新导致传统形式的数据存储和数据已经不能显然易见的看出数据所反映的问题。那么对供水数据的研究是刻不容缓的，这也是未来促使社会生活进步和大数据发展的趋势。想要利用大量数据来管理供水量必须搭载实时更新的技术进行学习，从而以直观的方式查看水表供水情况来把握和运用水表数据，进行可视化管理来提高节水量，现实学校供水量过大，水资源浪费等多方面问题。

1.2 研究意义

对水资源的保护是G20峰会的重要话题，如何节约水资源成为当下主要的事之一。水资源短缺会导致土地干裂不能种植作物，导致水质下降和环境污染。同时，水资源短缺造成地下水超采，还会引发地面沉降、地面塌陷、地裂缝、海水入侵、土地沙化等生态环境问题。如今高校的供水量以占据城市用水量的主要位置，所以对高校的水资源监控的开发显得尤为重要，更是保护未来水资源的重中之重。

但如今许多学校对供水系统依旧没有配置监控系统，靠单纯的人工巡检，部分学校虽具备监控系统，但软硬件设备单一、落后，只能于现场进行显示。某些二次供水系统虽然具备网络监控系统，但监控参数量较少，监控数据不全面；信息实时性及网络化水平非常不足，故障响应速度及管理手段等方面远不能满足实际要求，严重影响供水的稳定性及设备的安全性。4所以必将极大推动教育信息化的发展，将校园供水管网监控系统融入智慧校园建设。校园供水大屏展示系统的建设具有以下现实意义：

1. 实现校园供水系统的无人值守，节省物力财力投入；

2. 实现了校园供水管网运行状态数据的全面监控，提高监控质量；

3. 实现了校园供水管网的全网段监控，消除监控盲区；

4. 实现了管道的漏损定位，提高检修效率；

5. 实现了数据的异常报警功能，避免危险与事故的发生，保证人员与财产安

全；

6.高效地管理、保存完整地形数据；

7.充分利用计算机进行方便快捷的日常事务处理；

8.利用计算机实现办公自动化管理；

因此开发供水数据大屏展示已势在必行，利用大屏数据可视化不仅可以高效地管理、保存完整地形图数据；有效的提高日常查询检索速度；充分利用计算机进行方便快捷的日常事务处理；保证信息可靠存储、方便更新；利用计算机实现办公自动化管理；为高校提供更便捷的服务，并能实现快速查询、事故紧急处理、运行调度分析等功能的综合管理系统，为城市供水管网的日常管理、设计施工、分析统计、发展预测、规划决策提供可靠的、科学的依据。实现分析决策的全计算机化操作,提高供水管网管理的效率、质量和水平,系统的建立是城市供水管理数字化的发展要求。

2 国内外研究现状及研究假设

2.1 国内外研究现状

水资源管理一直都是社会需要解决的问题，对于水资源的运用技术不断的革新，现代以智能化软件来获取水务数据进行管理，一直以来都是众多学者所关注的焦点，因此很多学者对此进行了一定的研究。

随着改革开放和经济发展，中国的供水自动化监测和管理系统得以开发和推广。贾国华认为建立农村饮用水安全工程管理信息化系统是发展趋势。侯景伟等提出将水利工程技术、计算机 信息处理技术、自动控制技术、通信技术等充分融 合，建立强大的数据库，为领导决策和技术人员开 展工程建设管理工作提供信息支持，是保障农村饮 用水安全的有效手段。李云峰论述了“智慧供水” 的概念，提出智慧供水信息化建设的构想。

关于供水管网监控系统的建设，欧美等发达国家相对我国起步较早，早在 1960 年，欧美等发达国家就实现了对供水系统管道压力及水流量参数的实时监控。 国外主流的研究趋势是将React框架与其他技术相互组合，建立监控管理平台。在 1985 年左右，国外网络技术得到发展，监控系统可实现简单的网络通讯，并能以 报表的形式展现给管理人员。

结合上述一些文献，国内供水管网监控系统与国外相比较为落后，20 世纪 80 年代，我国才开始 实现对供水系统的监控，但当时只是人工巡检，通过人工统计报表的方式实现监控。所以必将极大推动教育信息化的发展，将校园供水管网监控系统融入智慧校园建设。实现分析决策的全计算机化操作,提高供水管网管理的效率、质量和水平,系统的建立是城市供水管理数字化的发展要求。

2.2 主要内容

本文依托智慧校园的建设诉求，深入调查研究了供水大屏可视化项目需要的技术流选型研究，根据项目需求及未来的发展趋势，制定了全面可行的设计方案。将校园供水数据与互联网技术及可视化技术相结合，实现了校园机器自动化供水工作，并用图表形式可视化提高办公的可读性、可理解性提高相关工作人员办公效率。本论文的研究工作如下：

第一部分，总结了本课题研究的目的和意义，确立了利用数据来管理供水量来实时更新的技术进行学习，以直观的方式查看水表供水情况来把握和运用水表数据，进行可视化管理来提高节水量。

第二部分，根据校园供水项目可实施性做了国内外研究状况方案的调查，以水资源管理一直都是社会需要解决的问题为主题，对中国、美国、澳洲等其他国家的供水管理研究进行对比，最终更清晰实现建立是城市供水管理数字化的发展要求。

第三部分，根据供水系统大屏项目进行模块分析，对模块软件程序的编写，即完成项目整体设计、项目数据流的设计、对项目三个大模块CenterPage，RightPage，LetfPage进行细致解析。

第四部分，针对校园供水管理项目提出改进，React 组件本身仅仅负责视图层的渲染和展现，不具备获取网络数据以及控制异步请求的功能，利用Dva框架对数据获取技术与异步控制做了改进，增强了组件获取异步数据时的管控能力。

3 实证分析与结果

3.1 数据来源

本文项目内置数据来自于大学生数学建模赛题。

3.2 相关技术综述

React框架采用虚拟 DOM ，通过 JSX 语法绘制出来的元素只是一种类似 DOM 的数据结构，并不是真正的 DOM，这种原理大大减少了 DOM 节点操作频率，优化了性能，另外React中数据流是单向的，数据通过组件 props 和 state 层层向下传递，如果要添加反向数据流，则需要通过父组件将回调函数传递给子组件。每当状态更新时，触发回调，父组件调用 setState 重新渲染页面。1

ECharts 是一款由百度研发团队开发的开源数据可视化库，可流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器，如 IE8/9/10/11，Chrome，Firefox，Safari 等。ECharts 底层依赖轻量级的矢量图形库 ZRender，能够提供直观、交互丰富和可高度个性化定制的数据可视化图表。2

Dva 是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，Dva 还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。

DataV通过图形化的界面轻松搭建专业水准的可视化应用，满足会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。

NodeJS 是一种基于 Chrome V8 引擎为内核的 JavaScript 运行环境，主要运行在服务端，并且 NodeJS 提了文件操作、网络服务、进程管理、异步编程等功能模块，能够方便地搭建响应速度快，易于扩展的网络应用。同时，由于 NodeJS 具有事件驱动，异步、非堵塞 I/O，单线程等优势，因此在开发高并发网络服务时，性能非常出众；NodeJS 占用系统资源少，运行成本低；NodeJS 对GoogleV8引擎进行了封装，执行 JavaScript 的速度快、效率高。3

3.3 架构设计

3.3.1 总架构设计

大屏管理项目采用四层分层结构，分别为视图层、交互层、逻辑层、请求的数据接口层。数据层是用Dva框架封装数据请求接口，通过Mock接口进行数据传输。逻辑层主要由图形引擎库、数据流引擎等组成，它是系统的核心部分，系统通过对这些规划进行逻辑组织生成各种应用层也就是视图层，逻辑层的存在使系统的可扩充性和可维护性得到了极大的提高。交互层即应用的客户端部分，它负责与用户打交道。在本系统中，交互层分为四部分，即数据流显示、数据维护、统计查询、事故处理。数据流现实实现面向的对象主要是全部数据流的显示，主要处理对应数据的相互关系。统计查询面向的对象主要是数据需求间的查询、展示、切换功能等。数据维护面向对象为数据运行时与其他数据对比的提示、分析、警报功能等，主要与供水位置相关数据的查询浏览、制图编辑、统计分析、事故分析等功能及系统维护等功能。 （如图一所示）

3.3.2 数据流层设计

高校供水管理大屏界面主要是供水的数据管理，包括水流流量的管理、现实、分析必须全面、完整，以满足数据大屏展示的需要。本文在React框架下以Dva原理为数据流处理核心机制，设计学校的大屏数据流曾架构展示。Dva运行原理在于通过绑定State和Component通过Route路由的Component组件Dispatch发送一个Action给Model，此时Dva框架中的Model模型会向reducer状态同步操作函数、effect异步请求函数、subscription路由监听函数分别开始根据Action中的动作分块Touch在Model中的三个函数里相互回传，当React在运行中Model被挂载运行完成，此时Model会向State进行传参，使State更新状态，从而改变Component组件中数据的更新。（如图二所示）

3.4模块功能解析

学校供水大屏展示项目由三个Component组件组成的UI界面，下节分别解析中间CenterPage组件、左侧LeftPage组件、右侧RightPage组件的功能。（如图三所示）

 

                                                                 图4-1 UI界面

3.4.1 CenterPage组件

CenterPage组件为大屏展示的中部视图，该组件分为两个子组件构成。子组件一主要以Echarts中的Map功能结合数据渲染显示学校占地面的积矢量图，在通过Echarts里的ZRender引擎调用Canvas绘图库将Option中的数据显示在矢量图区域中如表4-1所示，将每个数据对应在所在地区将用水量显示在区域内，在界面用鼠标轻置区域上即可显示当前区域用水量。

表4-1 Canvas渲染

部分代码
constructor(props) {
            super(props);
    this.state = {
      renderer: 'canvas',
    }
          {
            mapData?:''
          }
export default Map;

子组件二通过项目下Dva框架下的.roadhogrc.mock.js文件配置数据读取流如表4-2所示，在通过React中Require函数交替渲染在子组件二的UI界面上。

                                                         表4-2 Require渲染

部分代码



fs.readdirSync(mockPath).forEach(file => {
  Object.assign(mock, require('./mock/' + file));
});

module.exports = mock;

3.4.2 LeftPage组件

LeftPage组件为大屏展示的左部视图，该组件分为两个子组件构成。子组件一主要显示以Echarts中Canvas、SVG、VML三种渲染方式的Canvas对TrafficSitutation供水态势图进行时间推移实时更新各区域用水量的渲染如表4-3所示，同时Option设置其xAxis展示包括出口水流量数据、入口水流量数据，yAxis展示入口水流量数据、平均用水次数、用水峰值图表结构等。

表4-3 TrfficSituation渲染

部分代码
class TrafficSituation extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      renderer: 'canvas',
    };
  }
    const { renderer } = this.state;
    const { trafficSitua } = this.props;
    return (

        {trafficSitua ? (
          
export default TrafficSituation;

子组件二主要是显示用户使用水数据的状态，通过对mock.js与UserSituation进行交互获取数据体中的Id、Name、Time、State四部分数据对供水使用者的数据进行展示如表4-4所示。

表4-4 UserSituation渲染

部分代码
module.exports = {
 'GET /api/leftPageData': {
 accessFrequency: 1500,
    peakFlow: 300,
    trafficSitua: {
      timeList: ,
      outData: ,
      inData: ,
    },
    userSitua: {
      header: 
      data: [
    },
  },
};
//
Class UserSituation extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      config: {
  render() {
    const { userSitua } = this.props;
    const config = {
      ...this.state.config,
      ...userOptions(userSitua),
    };
 
}
export default UserSituation;

3.4.3 RightPage组件

  RightPage组件为大屏展示的右部视图，该组件分为三个子组件构成。子组件一主要的功能是显示学校一天各地区如：食堂、体育馆、图书馆、艺术楼、操场等的用水图在雷达图所占比的呈现状态。子组件二主要的功能是通过建立Model创建NameSpace定位、State设置状态、监听路由SubScription、发送异步请求Effect、实现同步操作Reducers设置Data更新来调取LeftPage组件里人员用水量的管理数据，如表4-4所示，来展示各个不同类型的人员如：教务处领导、学生、教师、后勤，外来人员用水量的统计排布情况。

表4-4 Model-RightPage交互

部分代码
import { getRightPageData } from '../services/index';
export default {
  namespace: 'rightPage',
  state: {},

  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen((location, action) => {
 
        if (location.pathname === '/') {
          dispatch({ type: 'getRightPageData' });
        }
      });

  effects: {
    *getRightPageData({ payload }, { call, put }) {
      const data = yield call(getRightPageData);
      if (data) {
        yield put({
          type: 'setData',
          payload: data,
        });
      } else {
        console.log(`获取右侧数据数据失败`);
      }
    },
  },

  reducers: {
    setData(state, action) {
      return { ...state, ...action.payload };
    },
  },
};

子组件三，主要的功能为显示主要用水量区域大的前四区域的用水状态并通过实时可视化展示，同时支持区域间相互对比功能和单独显示查看功能，并与供水量、超出供水量、维护次数三大指标结合显示供水态势。（如图四所示）

                                                         图4-3 功能对比视图

4 结论与建议

4.1 主要研究结论

本文互联网技术的变革带动了各行各业的飞速发展，Web 前端技术也呈现出了一片新的格局。传统的前端开发方式已经逐渐向模块化、组件化迁移，但随着前端工程体系复杂度的不断提升，现有的组件化开发方式也逐渐暴露出了许多潜在的问题，例如组件本身不具备异步请求网络数据的能力，并且对数量庞大的组件元素缺乏有效的数据管理机制，使得组件的功能性受到了很大限制，同时也不利于对大规模项目的扩展及维护。本文的主要工作，是通过分析现阶段组件化开发中存在的问题，并基于 React 技术特性，设计出一种数据管理、数据可视化的组件，并将组件应用于实际系统应用的开发中，与嵌入到其他开发的项目中使用。

本文对 React 组件生命周期模型进行了改进，由于 React 组件本身仅仅负责视图层的渲染和展现，不具备获取网络数据以及控制异步请求的功能，使得前端组件缺乏与服务器端通信的能力，这对创建需要动态渲染数据的组件增加了难度。本文针对这一问题，利用Dva框架对数据获取技术与异步控制做了改进，使得组件不仅能够在初始化渲染阶段就对网络数据进行访问，而且能够对访问请求的过程进行异步控制，增强了组件获取异步数据时的管控能力。

4.2 提出建议

根本文基于 React 技术框架与组件思想开发了一种数据管理、数据可视化的组件，并将引擎进行了实际的应用，为了使容器引擎更加稳定和成熟，后续还需要做一些研究工作：

1. 进一步加强引擎在各种运行环境下的兼容性以及适应性，使组件的应用及

装载更加灵活。

2. 进一步优化顶层组件容器引擎的使用性能，使数据请求模块、数据管理模块和组件装载模块之间的协作配合更加稳定和智能。

3. 将该方案从 PC 端迁移到移动端的页面开发，使其能够改善移动设备的页面构建方式。

参考文献

[1]郭蕊,赵元苏.Web前端框架技术综述[J].北京工业职业技术学院学报,2021,20(03):24-27.

[2]王兆益,周爱平.基于ECharts的数据可视化系统设计[J].计算机与网络,2020,46(19):60-62

[3]张贵强,王美玲.基于NodeJS的企业网站的设计与实现[J].信息技术与信息化,2019(12):58-60.

[4]王成荣.智慧校园供水管网监控系统设计[D].青岛科技大学,2020.DOI:10.27264