index.tsx

import * as React from 'react'
import * as echarts from 'echarts'
import Card from '@components/Card'
import Table from '@components/Table'
import { addInterFn, removeInterFn } from '@utils/index'
import ZhsModal from '@components/ZhsModal';
import * as style from './style.scss'

export interface Left1Props {
}

export default class Left1 extends React.Component<Left1Props, {}> {
  state = {
    sumline1: {
      theme: '#1adbfe',
      icon: 'icon1',
      title: '刑事案件',
      anjianSum: 21,
      anjianIng: 24,
      anjianLeft: 24,
      catchNum: 5
    },
    sumline2: {
      theme: '#18cf90',
      icon: 'icon2',
      title: '行政案件',
      anjianSum: 24,
      anjianIng: 2,
      anjianLeft: 3,
      catchNum: 1
    },

    daily: {
      ZDJQ: 0,
      GZJQ: 1
    },
    month: {
      ZDJQ: 0,
      GZJQ: 1
    },
    showToast: false
  }

  pieContent: any = null;
  componentWillMount() {
    
  }
  componentDidMount() {
    this.renderPie()
    this.fetchJingQing = this.fetchJingQing.bind(this)
    this.fetchJingQing()
    // addInterFn(this.fetchJingQing, 10)
  }

  componentWillUnmount () {
    removeInterFn(this.fetchJingQing)
  }

  fetchJingQing() {
    let self = this
    fetch('http://50.88.20.34:8081/jksj/dpsj/jqquery.action').then((response: any) => {
      return response.json()
    }).then((data) => {
        if(data.code === '0') {
          self.setState({
            daily: data.result.DAY,
            month: data.result.MONTH
          })
        }
        self.renderPie()
    })
  }

  renderPie() {
    const resizePercent: number = (window as any)['resizePercent']

    var option: echarts.EChartOption = {
      color: ['#fc8e31', '#35dbdf'],
      title: {
        show: false,
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        x: 'left',
        y: 'top',
        orient: 'vertical',
        data: ['重点警情', '关注警情'],
        itemWidth: 9,
        itemHeight: 9,
        textStyle: {
          color: '#b6deff',
          fontSize: 16 * resizePercent
        }
      },
      toolbox: {
        show: false
      },
      series: [
        {
          name: '警情',
          type: 'pie',
          radius: ['20%', '50%'],
          // roseType: 'radius',
          data: [
            { value: this.state.daily.ZDJQ, name: '重点警情' },
            { value: this.state.daily.GZJQ, name: '关注警情' }
          ],
          label: {
            formatter: [
              '{a|{c}}',
              '{b|{b}}'
            ].join('\n'),
            rich: {
              a: {
                fontSize: 32 * resizePercent,
                lineHeight: 10,
                align: 'center'
              },
              b: {
                height: 25,
              }
            }
          }
        }
      ]
    }

    var myChart = echarts.init(this.pieContent)


    myChart.setOption(option)
    myChart.on('click', (params: any) => {
      if(params.name === '关注警情') {
        
        this.setState({
          showToast: true
      })
      }
    })
    
  }

  closeModal() {
    this.setState({
        showToast: false
    })
}

  render() {
    return <div className={style.content}>
      <Card>
        <div className={style.all}>
          <div className={style.jingqingTable}>
            <Table img={require('./icon.png')} title={'警情态势'}>
              <div className={style.pieContent}>
                <div className={style.pie} ref={dom => this.pieContent = dom}></div>
                <div className={style.pieTable}>
                  <div className={style.line}>
                    <div className={style.item}>警情</div>
                    <div className={style.item}>今日</div>
                    <div className={style.item}>本月</div>
                  </div>
                  <div className={style.line}>
                    <div className={style.item}>关注</div>
                    <div className={style.item}>{this.state.daily.GZJQ}</div>
                    <div className={style.item}>{this.state.month.GZJQ}</div>
                  </div>
                  <div className={style.line}>
                    <div className={style.item}>重点</div>
                    <div className={style.item}>{this.state.daily.ZDJQ}</div>
                    <div className={style.item}>{this.state.month.ZDJQ}</div>
                  </div>
                </div>
              </div>
            </Table>
          </div>
        </div>
      </Card>
      <ZhsModal title="关注警情" showModal={this.state.showToast} onClose={this.closeModal.bind(this)}>
        <p>2019年04月06日14时01分22秒，江苏省南通市崇川区观音山镇通富路与通甲路老双毛毯厂着火，民警速至现场，此处为冯建春（32062419760322715X 电话13739144730）的织布厂操作车间发生火灾，具体原因不详，现场过火面积100平方左右，操作车间内的损失待进一步核实，民警现场维持秩序，协助消防救援，民警通知报警人陈夕梅（320624197011207163 电话15996585898），车间工人葛云芳（320624197506057187 电话13912298094）及冯建春到所进一步调查。</p>
      </ZhsModal>
    </div>
  }
}