基于JavaScript的洪涝监测系统源码.zip

import React from 'react'; import {Row, Col, Icon, Layout, Button, Tabs, Table, Tree, Card,Tag ,Timeline} from 'antd'; import {Map, Markers, InfoWindow} from 'react-amap'; import fetch from 'dva/fetch'; import PropTypes from 'prop-types'; import bpimg from '../assets/BP.png'; // import { routerRedux } from 'dva/router'; // function reducers(state = 1, action) { // switch (action.type) { // case 'Done': // return state + action.payload; // default: // return state; // } // }; const TreeNode = Tree.TreeNode; const {Sider, Content} = Layout; const {Column} = Table; const TabPane = Tabs.TabPane; const ReactHighcharts = require('react-highcharts'); ReactHighcharts.Highcharts.setOptions({ global:{ useUTC:false } }); const Highcharts = require('highcharts'); // const chartconfig = { // chart: { // zoomType: 'x', // }, // title: { // text: '洪涝事件探测结果阶段划分图', // }, // subtitle: { // text: '异常事件', // }, // xAxis: { // type: 'datetime', // labels: { // format: '{value:%y-%m-%d %H:%M}', // align: 'right', // rotation: -30, // }, // }, // series: null, // }; const divStyle = { color: 'red', backgroundImage: 'url(../assets/BP.png)', // 或者 background: `url${require("1.jpg")}` }; export class EventShowComponent extends React.Component { static contextTypes = { router: PropTypes.object, } state = { eventID: '', floodResult:null, propertys: [], sensors: null, markers: { position: { longitude: 115, latitude: 30, }, }, currentMarker: null, visible: true, selectedRowKeys: [], center: {longitude: 120.1, latitude: 30.1}, activeServiceStatus: '无事件', chartconfig: { chart: { zoomType: 'x', }, title: { text: '洪涝事件探测结果阶段划分图', }, subtitle: { text: '异常事件', }, xAxis: { type: 'datetime', labels: { format: '{value:%y-%m-%d %H:%M}', align: 'right', rotation: -30, }, }, series: null, }, currentMessage:null, predictConfig:null, statisticMessage:null }; constructor(props, context) { super(props, context); // alert(this.props.eventID); // 根据eventID获取事件的名称，事件的传感器信息，事件的基本参数信息 // 获取当前页面的基本信息 // alert(this.props.eventID); // this.showChart(); const _this = this; // 随机生成 10 个标记点的原始数据 this.markers = null; this.markersEvents = { click(e, marker) { // 通过高德原生提供的 getExtData 方法获取原始数据 const extData = marker.getExtData(); const index = extData.myIndex; // alert(extData.position.longitude); const visi = _this.state.visible; _this.setState({currentMarker: extData, visible: !visi}); }, }; this.setState({ eventID: this.props.eventID, }); } componentDidMount() { // this.interval = setInterval(() => fetch('http://www.myflood.com/getEventStatus', { // method: 'POST', // credentials: 'include', // headers: // { // Accept: 'application/json', // 'Content-Type': 'application/json; charset=utf-8', // }, // body: this.props.eventID, // }).then((response) => { // if (response.status >= 200 && response.status < 300) { // return response.json(); // } else { // const error = new Error(response.statusText); // error.response = response; // throw error; // } // }, // ).then((data) => { // if (data.flag) { // this.setState({ // activeServiceStatus: data.object, // }); // } else { // const path = { // pathname: '/error', // query: data.message, // }; // this.context.router.history.push(path); // } // }), 1000); // this.showChart(); // 获取传感器的基本信息 fetch('http://www.myflood.com/getEventBaseData', { method: 'POST', credentials: 'include', headers: { Accept: 'application/json', 'Content-Type': 'application/json; charset=utf-8', }, body: this.props.eventID, }).then((response) => { if (response.status >= 200 && response.status < 300) { return response.json(); } else { const error = new Error(response.statusText); error.response = response; throw error; } }, ).then((data) => { if (data.flag) { // 构建一个数组，用于存储所有的传感器数据 var predictSensors = data.object.dataset.sensors; var statisticSensors=data.object.sensors; var sensors = new Array(); for(var i=0;i<predictSensors.length;i++) { sensors.push(predictSensors[i]); } for (var i=0;i<statisticSensors.length;i++) { sensors.push(statisticSensors[i]); } console.log(sensors); this.setState({ floodResult: data.object, sensors: sensors, propertys: data.object.propertys, center: { longitude: data.object.dataset.diagnosisSensor.lon, latitude: data.object.dataset.diagnosisSensor.lat }, }); } else { const path = { pathname: '/error', query: data.message, }; this.context.router.history.push(path); } }).catch((error) => { alert(error.toString()); }); // 获取当前流 // this.runPolling(); } // *pollForWeatherInfo() { // while (true) { // yield fetch('http://www.myflood.com/sadJson', { // method: 'get', // }).then((d) => { // const json = d.json(); // return json; // }); // } // } // runPolling=(generator) => { // if (!generator) { // generator = this.pollForWeatherInfo(); // } // // const p = generator.next(); // p.value.then((d) => { // if (true) { // this.setState({ // chartconfig: { // chart: { // zoomType: 'x', // }, // title: { // text: '洪涝事件探测结果阶段划分图', // }, // subtitle: { // text: '异常事件', // }, // xAxis: { // type: 'datetime', // labels: { // format: '{value:%y-%m-%d %H:%M}', // align: 'right', // rotation: -30, // }, // }, // series: d, // }, // }); // this.runPolling(generator); // } else { // console.log(d); // } // }); // } showChart = () => { // clearInterval(this.interval); fetch('http://www.myflood.com/getEventDataJson', { method: 'POST', credentials: 'include', headers: { Accept: 'application/json', // 'Access-Control-Allow-Origin': 'http://127.0.0.1', // 'Access-Control-Allow-Credentials': 'true', 'Content-Type': 'application/json; charset=utf-8', }, body: JSON.stringify(this.props.eventID), }).then((response) => { if (response.status >= 200 && response.status < 300) { return response.json(); } else { const error = new Error(response.statusText); error.response = response; throw error; } }, ).then((data) => { if (data.flag) { this.setState({ chartconfig: { chart: { zoomType: 'x', }, title: { text: '洪涝事件探测结果阶段划分图', }, s