時間：2023-09-04 14:06:01 | 來源：網(wǎng)站運營
時間：2023-09-04 14:06:01 來源：網(wǎng)站運營
基于 React+antd 的環(huán)境監(jiān)測網(wǎng)站的設(shè)計與實現(xiàn)：摘 要: 生態(tài)環(huán)境是人類生存的物質(zhì)基礎(chǔ)，也是經(jīng)濟系統(tǒng)運行的基礎(chǔ)，生態(tài)環(huán)境問題是由于人類長期的生產(chǎn)和生活等社會經(jīng)濟行為所引起的生態(tài)環(huán)境破壞而反作用于人類社會經(jīng)濟生活的不良影響，其實質(zhì)是經(jīng)濟發(fā)展與環(huán)境保護、人與自然關(guān)系的失調(diào)。目前，環(huán)境問題已成為全球社會性的問題。如何解決好這一問題，關(guān)系到人類社會的生存。因此，采取有效的治理措施，對促進(jìn)社會經(jīng)濟持續(xù)、健康發(fā)展具有十分重要的意義。所以，本網(wǎng)站的作用就是致力于監(jiān)控生態(tài)環(huán)境并處理污染，主要針對空氣、水質(zhì)、土質(zhì)和污染四個方面，并根據(jù)這四個方面來改善周圍環(huán)境。本文主要闡述的是利用 React+antd 框架來搭建一個環(huán)境監(jiān)測管理網(wǎng)站，包括網(wǎng)頁制作，數(shù)據(jù)聯(lián)調(diào)和功能說明等。
在線咨詢
'use strict';import React, { Component } from 'react';import { connect } from 'react-redux';import { Link,browserHistory } from 'react-router';import Headers from '../../components/Header';import Navigation from '../../components/Navigation';import NavList from '../../components/Navigation/NavList.jsx';import { Layout } from 'antd';const { Header, Footer, Sider, Content } = Layout;import '../../static/css/reset.css';import '../../static/css/common.css';import '../../static/css/icon.less';import './App.css';import Login from '../Login/index.jsx';import { fetchPost, fetchPut, fetchGet, fetchDelete } from '../../static/js/httprequest';import URL from '../../constants/HostConfig';import {adminUser} from '@app/constants/DataSource.jsx';class App extends Component { constructor(props, context) { super(props); this.state = { }; } componentWillMount() { if(adminUser.login === false) { browserHistory.push('/Login'); } } render() { return ( <div> { adminUser.login ?<Layout style = {{ minHeight: document.body.clientHeight,minWidth: 980 }}> {/*頭部*/} <Header className='header'> <Headers isOline = {false} userName = {'admin'} menuList = { [{title: '退出登錄',props: {onClick: () => {adminUser.login = false; browserHistory.push('/Login');} } }] } /> </Header> <Layout> {/*導(dǎo)航條*/} <Sider className = 'navigation'> <Navigation navlist = {NavList} pathname = {this.props.location.pathname} /> </Sider> {/*右側(cè)內(nèi)容*/} <Content className = "main" style = {{padding:20}}> {this.props.children} </Content> </Layout> </Layout>: <Login /> } </div> ); }}function mapStateToProps(state) { return { }}export default connect( mapStateToProps,{}App)React 的 jsx 代碼和 Java 代碼很像，都有頭部 import 引入，定義 Class 類，類中有構(gòu)造函數(shù)和 render 輸出。const menuList = this.props.menuList;const messageList = this.props.messageList;const menu = ( <Menu>{ menuList.map((item, index) => ( <Menu.Item key = {index}> <a {...item.props}>退出登錄</a> </Menu.Item>}</Menu> );let menuNode, messageNode;return ( <div> <img className = 'header-img' src = '../../static/img/logo.png' /> <span className = 'alimis-header-title'></span> <ul className = "login-message"> <li className = 'login-menu-list' ref = {(node) => menuNode = node}> <Dropdown overlay= {menu} trigger= {['click']}getPopupContainer = {() => { return menuNode; }}><a> {adminUser.name}<Icon style = {{ fontSize: 12 }} type="down" /></a></Dropdown></li></ul></div> );<Menu><Menu.Item>菜單項</Menu.Item><SubMenu title="子菜單"> <Menu.Item><Link to ="路由" >子菜單項</Link></Menu.Item> </SubMenu> </Menu>其中導(dǎo)航條個數(shù)和導(dǎo)航條標(biāo)題內(nèi)容主要存放在相同文件夾的 NavList.jsx 文件中，代碼是：const NavList = [ {component: '',layout: '',name: '導(dǎo)航條',path: '',children: [{name:'首頁',icon:'laptop',path:'首頁',children:[{name:'分析',path:'/Analysis',component:'首頁', },{name:'監(jiān)控',path:'/Monitor',component:'首頁' },{name:'工作臺',path:'/Workbench',component:'首頁' }] },{name:'列表',icon:'line-chart',path:'列表',children:[{name:'項目',path:'/ProjectTeam',component:'列表',info:'/ProjectInfo' },{name:'人員信息',path:'/UserManage',component:'列表', }] },{name:'操作',icon:'setting',path:'操作',children:[{name:'新建項目',path:'/ProjectForm',component:'操作' },{name:'財務(wù)管理',path:'/Finance',component:'操作' }] },{name:'排行榜',icon:'bars',path:'/Rankings' }]} ];export default NavList;使用 getNavMenuItems 方法把以上代碼進(jìn)行 map 循環(huán)，輸出每一個的導(dǎo)航條按鈕，效果如圖 5.3.1。主要 getNavMenuItems 方法代碼如下：//獲取導(dǎo)航欄目錄名字信息，輸出 DOM 目錄getNavMenuItems = (menusData) => { if (!menusData) { return []; } return menusData.map((item) => { if (!item.name) { return null; } let itemPath; if (item.path.indexOf('http') === 0) { itemPath = item.path; } else { itemPath = `$ {item.path || ''}`.replace(///+/g, '/'); } let active = []; if (item.children && item.children.some(child => child.name)) { return ( <SubMenu title = { item.icon ? ( <span> <Icon type = {item.icon}/> <span>{item.name}</span> </span> : item.name } key = {item.path || item.key} > {this.getNavMenuItems(item.children)} </SubMenu> ); } return ( <Menu.Item key = {item.key || item.path}> <Link to = {itemPath} target = {item.target} onClick = {this.props.onClick}> {item.icon ? <Icon type = {item.icon}/> : null} <span> {item.name}</span> </Link> </Menu.Item> ); });}clockTime = () =>{ this.timer = setInterval(() => { const time = new Date(); this.setState({time}); },1000); }return 方法代碼如下：<div> <p>{formatTime(this.state.time,'yyyy年mm月dd')}日</p> <p>星期{dayArr[this.state.time.getDay()]}</p> <p style = {{color:'#008CFF'}}>{formatTime(this.state.time,'hh:ff:ss')}</p> </div><ReactHighcharts config={config1} />let config1 = this.formChart({ title:'環(huán)境指數(shù)評分詳情(每天12點更新)', series:[{ name:'分值', data: [ {name:'空氣',y: endexData[analysisJson.region].a,color: '#008CFF'}, {name:'污染',y: endexData[analysisJson.region].b,color:'#008CFF'}, {name:'水質(zhì)',y: endexData[analysisJson.region].c,color:'#008CFF'}, {name:'土質(zhì)',y: endexData[analysisJson.region].d,color:'#008CFF'}, ] }], type:'bar', xAxis:{ categories: ['空氣', '污染', '水質(zhì)', '土質(zhì)'], title: { text: null } }, legend:{ enabled:false }});formChart = (option) => { let config = { chart: { type: option.type, height:423 }, title: { text: option.title, style:{'fontSize': '16px'} }, xAxis: option.xAxis, yAxis: { min: 0, max:100, title: { text: null } }, legend:option.legend, plotOptions: { bar: { dataLabels: { allowOverlap: true, enabled: true, //禁用數(shù)據(jù)名稱 } } }, exporting:{ enabled:false }, credits:{ enabled: false // 禁用版權(quán)信息 }, series: option.series }; return config; }環(huán)境歷史指數(shù)也是使用相同的 formChart 方法來完成 Highchart 的配置，部分代碼如下：let config2 = this.formChart({title:'歷史環(huán)境指數(shù)評分(每月1號更新)',series:[{name:'分值',data: endexData[analysisJson.region].score,color:'#008CFF' },{name:'平均分值',data: [89,90,89,86,86,88,92,91,86,85,84,90],color:'#00FF00' }],type:'',xAxis:{ max:12, min:1, maxPadding:1 },legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle' }});formChart = (option) => { let config = {chart: {type: 'spline' , marginRight: 10,events: {load: function () { var series = this.series[0], series1 = this.series[1], chart = this; option.clock(option.timer,option.wholeNum,series,series1); } } },title: {text: '實時數(shù)據(jù)' },tooltip: {dateTimeLabelFormats: {millisecond:"%b %e, %H:%M:%S" } },xAxis: {type: 'datetime' , tickPixelInterval: 150,dateTimeLabelFormats: {millisecond: '%H:%M:%S' , } },yAxis: {title: {text: '值' }, max:100, min:50 },legend: {enabled: true },exporting: {enabled: false },credits: {enabled: false // 禁用版權(quán)信息 },series: [{name: '分值',data: (function () { var data = [], time = (new Date()).getTime()+1000*60*60*8, i; for (i = -100; i <= 0; i += 1) { data.push({x: time + i * 1000,y: option.wholeNum + ((-1)^Math.ceil(Math.random()*10))*(Math.ceil(Math.random()*100)/100) }); } return data; } ()),color:'#008CFF' },{name: '平均值',data: (function () { var data = [], time = (new Date()).getTime()+1000*60*60*8, i; for (i = -100; i <= 0; i += 1) { data.push({x: time + i * 1000,y: option.wholeNum + ((-1)^Math.ceil(Math.random()*10))*(Math.ceil(Math.random()*100)/100) }); } return data; } ()),color:'#FF0000' },] }; return config;}const Card_Grid = [];for(let i = 0; i<6; i++) { if(projectData[i]) { let status = 'normal'; if(projectData[i].state === 0) { status='active'; } else if(projectData[i].state === 1) { status='exception'; } else if(projectData[i].state ===2) { status = 'success'; } Card_Grid.push( <Card.Grid style= {gridStyle} key = {'Card.Grid'+i} style = {{paddingBottom:20}}> <Link to = {'/ProjectInfo?key='+i}> <div className = 'xiangmu'><Avatar style= {{ backgroundColor: projectData[i].color, verticalAlign: 'middle' }}> {projectData[i].title.substr(3,2)} </Avatar> <span className = 'titleItem'> {projectData[i].title}</span> <Progress percent= {projectData[i].process} status= {status}/><div style = {{marginTop:10,fontSize:10,color:'#999'}}> {projectData[i].name} <Divider type="vertical" style = {{height:10,top:0}}/> {projectData[i].endDate} </div> </div> </Link> </Card.Grid> ) }}<div className = 'projectForm'> <Card> <Breadcrumb> <Breadcrumb.Item><Link to = '/Analysis'>首頁</Link></Breadcrumb.Item> <Breadcrumb.Item>新建項目</Breadcrumb.Item> </Breadcrumb><p style = {{fontSize:20,paddingTop:20}}>新建項目</p></Card><Card style = {{marginTop:20}}><Row><Col span = {12} offset = {5}> <Form onSubmit= {this.handleSubmit}> <FormItem{...formItemLayout}label="項目名稱" >{ getFieldDecorator('title', {rules: [{required: true, message: '請輸入項目名稱', }], })( <Input placeholder = '請輸入項目名稱'/> )}</FormItem><FormItem{...formItemLayout}label="項目類型" >{ getFieldDecorator('type', {rules: [{required: true, message: '請選擇項目類型', }], })( <Select placeholder="請選擇項目類型"> <Option value="空氣">空氣</Option> <Option value="污染">污染</Option> <Option value="土質(zhì)">土質(zhì)</Option> <Option value="水質(zhì)">水質(zhì)</Option> </Select> )}</FormItem><FormItem{...formItemLayout}label="初始分?jǐn)?shù)" >{ getFieldDecorator('initial', {rules: [{required: true, message: '請輸入初始分?jǐn)?shù)', }], })( <InputNumber min = {0} max = {100} placeholder = '請輸入'/> )}</FormItem><FormItem{...formItemLayout}label="目標(biāo)分?jǐn)?shù)" >{ getFieldDecorator('target', {rules: [{ required: true, message: '請輸入目標(biāo)分?jǐn)?shù)' }], })( <InputNumber min = {0} max = {100} placeholder = '請輸入'/> )}</FormItem><FormItem{...formItemLayout}label="資金" >{ getFieldDecorator('capitalAll', {rules: [{ required: true, message: '請輸入資金' }], })( <InputNumber min = {0} max = {10000} placeholder = '請輸入'/> )}</FormItem><FormItem{...formItemLayout}label="開始和結(jié)束時間" >{ getFieldDecorator('time', {rules: [{ required: true, message: '請選擇開始和結(jié)束時間' }], })( <RangePicker onChange={this.onChange}/> )}</FormItem><FormItem{...formItemLayout}label="成員" >{ getFieldDecorator('user', {rules: [{ required: true, message: '請至少選擇一個成員' }], })( <Select mode="multiple" placeholder="請選擇成員" > {userList} </Select> )}</FormItem><FormItem{...formItemLayout}label="描述" >{ getFieldDecorator('task', {rules: [{ required: true, message: '請輸入描述' }], })( <TextArea rows={4} placeholder = '請輸入描述'/> )}</FormItem><FormItem {...tailFormItemLayout}><Button type="primary" htmlType="submit">新建</Button> </FormItem> </Form> </Col> </Row> </Card> </div><div className = 'workbench'> <Row gutter = {16}> <Col span = {24}> <Card loading = {this.state.loading}> <Breadcrumb> <Breadcrumb.Item><Link to = '/Analysis'>首頁</Link></Breadcrumb.Item> <Breadcrumb.Item>財務(wù)管理</Breadcrumb.Item> </Breadcrumb> <Table dataSource={this.state.data} columns={columns} /> </Card> </Col> </Row> <Modal title="撥款" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} > 資金:<InputNumber min={0} max={100000} defaultValue={0} onChange = {this.onChange}/> </Modal> </div><div className = 'workbench'> <Row gutter = {16}> <Col span = {24}> <Card> <Breadcrumb> <Breadcrumb.Item><Link to='/Analysis'>首頁</Link></Breadcrumb.Item> <Breadcrumb.Item>排行榜</Breadcrumb.Item> </Breadcrumb> <Row><Col span = {24} style = {{paddingTop:30,textAlign:'center'}}><div className = 'statItem'> <p>環(huán)境指數(shù)</p> <p> {endexData[analysisJson.region].fraction}</p> </div> <Divider type="vertical" /> <div className = 'statItem'> <p>隊伍編號</p> <p> {endexData[analysisJson.region].ranksId}</p> </div> <Divider type="vertical" /> <div className = 'statItem'> <p>隊伍排名</p> <p> {endexData[analysisJson.region].key}/ {endexData.length}</p> </div> </Col> </Row> <Table dataSource= {data} columns= {columns} loading = {this.state.loading}/> </Card> </Col> </Row> </div>| 級別 | 描述 |
|---|
React 技術(shù)棧系列教程：http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html Ant Design 組件庫：https://ant.design/index-cn ES6 入門：http://es6.ruanyifeng.com/ [4] hcharts 教程：http://www.hcharts.cn/
關(guān)鍵詞：設(shè)計,實現(xiàn)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
