tsg-web/src/views/Home/MapCtrl/components/DrpStAround.js

/* eslint-disable react/no-unused-state */
/* eslint-disable no-unused-vars */
import React from 'react';
import {Button, Form, Table, InputNumber, Select, message, Checkbox} from 'antd';
import {queryNearbyRainStations} from "../../../../service/ssyq";
import {renderTm} from '../../../../utils/renutils';
import appconsts from '../../../../service/appconsts';

function distanceOfEarth(latlng1, latlng2) {
  const rad = Math.PI / 180;
  const lat1 = latlng1[1] * rad;
  const lat2 = latlng2[1] * rad;
  const sinDLat = Math.sin((latlng2[1] - latlng1[1]) * rad / 2);
  const sinDLon = Math.sin((latlng2[0] - latlng1[0]) * rad / 2);
  const a = sinDLat * sinDLat + Math.cos(lat1) * Math.cos(lat2) * sinDLon * sinDLon;
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return 6371000 * c;
}

export default class DrpStAround extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      record: props.data || {},
      distance: 1,
      sources: ["SH", "SW", "QX", "SK"],
      sttype: undefined,
      loading: false,
      data: [],
      filteredData: [],
      typeOptions: [
        {label: "山洪", value: "SH"},
        {label: "水文", value: "SW"},
        {label: "气象", value: "QX"},
        {label: "水库", value: "SK"},
      ],
    };

    this.columns = [
      {
        title: '测站名称',
        dataIndex: 'stnm',
        key: 'stnm',
        width: 100,
        align: 'center',
        ellipsis: true,
      },
      {
        title: '类型',
        dataIndex: 'source',
        key: 'source',
        width: 60,
        align: 'center',
        render: val => appconsts.sttype[val]
      },
      {
        title: '距离(km)',
        dataIndex: 'distance',
        key: 'distance',
        width: 80,
        align: 'center',
        render: val => val ? val.toFixed(2): 0
      },
      {title: '1时(mm)', dataIndex: 'h1', key: 'h1', width: 50, align: 'center', render: (val, record) => record.h1},
      {title: '3时(mm)', dataIndex: 'h3', key: 'h3', width: 50, align: 'center', render: (val, record) => record.h3},
      {title: '6时(mm)', dataIndex: 'h6', key: 'h6', width: 50, align: 'center', render: (val, record) => record.h6},
      {title: '24时(mm)', dataIndex: 'h24', key: 'h24', width: 50, align: 'center', render: (val, record) => record.h24},
      {
        title: '上报时间',
        dataIndex: 'tm',
        key: 'tm',
        width: 100,
        align: 'center',
        render: (val, record) => renderTm(record)
      },
    ];
  }

  componentDidMount = () => {
    this.loadData();
  }

  loadData = async () => {
    let params = {
      stcd: this.state.record.stcd,
      sources: this.state.sources,
      distance: this.state.distance
    }
    this.setState({loading: true});
    queryNearbyRainStations(params).then((data) => {
      this.setState({loading: false, data: data});
    });
  }

  doSearch = async () => {
    this.loadData()
  }

  render() {
    const {loading, data, distance, typeOptions} = this.state;

    return (
      <div>
        <div style={{marginBottom: '12px'}}>
          <Form layout="inline">
            <Form.Item label="距离">
              <InputNumber value={distance} onChange={val => this.setState({distance: val})}/>
              <span style={{marginLeft: 8}}>(km)</span>
            </Form.Item>
            <Form.Item label="类型">
              <Checkbox.Group options={typeOptions} onChange={val => this.setState({sources: val})}
                              defaultValue={["SH", "SW", "QX", "SK"]}/>
            </Form.Item>
            <Form.Item>
              <Button type="primary" onClick={this.doSearch} disabled={loading}>查询</Button>
            </Form.Item>
          </Form>
        </div>
        <div>
          <Table
            size="small"
            rowKey={rec => rec.type + rec.stcd}
            bordered
            dataSource={data}
            columns={this.columns}
            pagination={{pageSize: 10, hideOnSinglePage: true}}
          />
        </div>
      </div>
    );
  }
}