import {Modal, Tabs, Switch} from 'antd'
import React, {useEffect, useMemo, useState} from 'react';
import "./index.less"
import ReactEcharts from "echarts-for-react";

const SyglPage: React.FC = () => {
  const [echartsOption, setEchartsOption] = useState({});

  // @ts-ignore
  const getOption = () => {
    const data0 = [1, 1, 1, 1, 1];
    const option = {
      tooltip: {
        // 在鼠标悬停时触发显示
        trigger: 'axis',
      },
      textStyle: {
        color: "#C9C9C9",
      },
      legend: {
        type: "scroll",
        orient: 'vertical',
        selectedMode: false,
        right: "40%",
        top: "15%",
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },
      grid: {
        containLabel: true,
        left: "3%",
        top: "20%",
        bottom: "0%",
        right: "0%",
      },
      xAxis: {
        type: "category",
        data: [
          "2015",
          "2016",
          "2017",
          "2018",
          "2019",
        ],
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            opacity: 0.9,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 20, //刻度标签与轴线之间的距离。
          textStyle: {
            fontFamily: "Microsoft YaHei",
            color: "#FFF",
          },
          fontSize: 12,
          fontStyle: "bold"
        },
      },
      yAxis: {
        name: "(万元)",
        max: 12000,
        min: 0,
        nameTextStyle: {
          color: '#fff',
          opacity: 0.9
        },
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            opacity: 0.9,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.3)',
          }
        },
        axisLabel: {
          textStyle: {
            fontFamily: "Microsoft YaHei",
            color: "#FFF",
          },
          fontSize: 12,
        },
      },
      series: [
        {
          type: "bar",
          data: [1796, 717, 2500, 9445, 11345],
          barMaxWidth: "auto",
          barWidth: 30,
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [{
                offset: 0,
                color: "#00A9FF",
              },
                {
                  offset: 1,
                  color: "#66DDFF",
                },
              ],
            },
          },
        },
        // color: [, "#018bc1", "#96e092", "#DE9FB1", "#f06e90", "#f89e92",],
        {//一蓝底
          data: data0,
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          color: "#66DDFF",
          symbolOffset: ['0', "50%"],
          symbolSize: [30, 10],
          zlevel: 2,
          tooltip: {
            show: false // 不显示数据2的tooltip
          }
        },
        {//一蓝盖
          data: [1796, 717, 2500, 9445, 11345],
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          symbolPosition: "end",
          color: "#77C9FF",
          symbolOffset: ['0', "-45%"],
          symbolSize: [30, 10],
          zlevel: 2,
          tooltip: {
            show: false // 不显示数据2的tooltip
          }
        },

      ],

      markArea: {
        silent: true,

      }
    };
    setEchartsOption(option);
  };

  useEffect(() => {
    getOption();
  }, []);
  return (
    <div className='content'>
      <div className='left-box'>
        <div className='box'>
          <div className='box-title'>
            <div className='title-items items-active'>工程概况</div>
            <div className='title-items'>大事记</div>
            <div className='title-items'>美丽水厂</div>
          </div>
          <div className='box1'>
            <img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
            <div className='box1-content'>
              <div className='box1-content-top'>
                <div className='box1-content-top-img'>
                  <img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/img2.png`} alt=""/>
                </div>
                <div className='box1-content-top-text'>
                  咸丰县水利局坚持把抓好农村饮水安全、助力脱贫攻坚放在中心位置，切实履行行业扶贫责任，扎实抓好精准扶贫农村饮水安全工程建设，全面解决建档立卡贫困人口“饮水难”问题，我县共投入<span>25804.04</span>万元推进实施6批次精准扶贫农村饮水安全工程。
                </div>
              </div>
              <div className='box1-content-bottom'>
                新建或改造农村供水工程369个（处），改善或提高<span>24.46</span>万农村居民的饮水条件（包括<span>14.99</span>万建档立卡贫困人口），同步建设高效智慧的农村供水管理平台，实现从源头到龙头全过程精细化管理。
              </div>
            </div>
            <img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>工程投资</div>
          </div>
          <div className='box2'>
            <ReactEcharts
              option={echartsOption}
              style={{width: "100%", height: 'calc( 100% - 10px )'}}
            />
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>工程成效</div>
          </div>
          <div className='box3'>
            <div className='box3-content'>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  自来水普及率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box3_1.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>85.24%</div>
                    <div className='box3-item-data-btm'>2015年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>14.26%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>99.50%</div>
                    <div className='box3-item-data-btm'>2023年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  集中供水率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box3_2.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>75.64%</div>
                    <div className='box3-item-data-btm'>2015年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>18.86%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>94.50%</div>
                    <div className='box3-item-data-btm'>2023年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  供水保证率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box3_3.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>89.34%</div>
                    <div className='box3-item-data-btm'>2015年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>10.56%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>99.90%</div>
                    <div className='box3-item-data-btm'>2023年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  水质达标率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box3_4.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>90.25%</div>
                    <div className='box3-item-data-btm'>2015年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>9.65%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>99.90%</div>
                    <div className='box3-item-data-btm'>2023年</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div className='right-box'>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>洪水简报</div>
          </div>
          <div className='box4'>
            <img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
            <div className='box4-content'>
              <div className='box4-content-item'>12月供水总量<span>85</span>万立方米，环比增长<span>4.5</span>%，其中水量供应排名前三是活龙乡、清坪镇、坪坝营镇</div>
              <div className='box4-content-item'>全县12月累计运维工单<span>270</span>件，管网巡检<span>178</span>次，水厂维修<span>30</span>次、用户维修服务<span>70</span>次，工单完成率<span>85</span>%;</div>
              <div className='box4-content-item'>全县12月累计受理<span>13</span>个群众投诉件，已办结<span>11</span>个，其中完成整改<span>9</span>个，持续整改<span>0</span>个，办结率<span>95</span>%</div>
            </div>
            <img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>在建工程</div>
          </div>
          <div className='box5'>
            <div className='box5-title'>
              <div className='box5-title-item width-10'>序号</div>
              <div className='box5-title-item  width-30'>工程名称</div>
              <div className='box5-title-item width-20'>投资金额</div>
              <div className='box5-title-item  width-20'>项目类别</div>
              <div className='box5-title-item width-20'>工程进度</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>1</div>
              </div>
              <div className='box5-li width-30'>水质提升EPC工程</div>
              <div className='box5-li width-20'>3900万</div>
              <div className='box5-li width-20'>水质提升</div>
              <div className='box5-li width-20 color-green'>80%</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>2</div>
              </div>
              <div className='box5-li width-30'>黑山水库供水灌溉工程项目</div>
              <div className='box5-li width-20'>3332万</div>
              <div className='box5-li width-20'>水源建设</div>
              <div className='box5-li width-20 color-green'>90%</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>3</div>
              </div>
              <div className='box5-li width-30'>水质提升EPC工程</div>
              <div className='box5-li width-20'>3900万</div>
              <div className='box5-li width-20'>水质提升</div>
              <div className='box5-li width-20 color-green'>80%</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>4</div>
              </div>
              <div className='box5-li width-30'>黑山水库供水灌溉工程项目</div>
              <div className='box5-li width-20'>3332万</div>
              <div className='box5-li width-20'>水源建设</div>
              <div className='box5-li width-20 color-green'>90%</div>
            </div>
            <div className='box5-list'>
              <div className='box5-li  width-10'>
                <div className='box5-li-num '>5</div>
              </div>
              <div className='box5-li width-30'>水质提升EPC工程</div>
              <div className='box5-li width-20'>3900万</div>
              <div className='box5-li width-20'>水质提升</div>
              <div className='box5-li width-20 color-green'>80%</div>
            </div>
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>智慧化成效</div>
          </div>
          <div className='box3'>
            <div className='box3-content'>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  运营成本率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box6_1.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>75.24%</div>
                    <div className='box3-item-data-btm'>2015年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>16.26%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>91.50%</div>
                    <div className='box3-item-data-btm'>2023年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  供水漏损率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box6_2.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>35.64%</div>
                    <div className='box3-item-data-btm'>2015年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>12.14%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>23.50%</div>
                    <div className='box3-item-data-btm'>2023年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  巡检养护率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box6_3.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>79.34%</div>
                    <div className='box3-item-data-btm'>2015年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>20.56%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>99.90%</div>
                    <div className='box3-item-data-btm'>2023年</div>
                  </div>
                </div>
              </div>
              <div className='box3-item'>
                <div className='box3-item-title'>
                  便民服务率
                </div>
                <div className='box3-content-bottom'>
                  <div className='box3-item-img'>
                    <img src={`${process.env.PUBLIC_URL}/assets/box6_4.png`} alt=""/>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>65.25%</div>
                    <div className='box3-item-data-btm'>2015年</div>
                  </div>
                  <div className='box3-item-arrow'>
                    <div className='box3-item-arrow-top'>33.25%</div>
                    <div className='box3-item-arrow-btm'>
                      <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
                    </div>
                  </div>
                  <div className='box3-item-data'>
                    <div className='box3-item-data-top'>98.50%</div>
                    <div className='box3-item-data-btm'>2023年</div>
                  </div>
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>

      <div className='map'>
        <img style={{width:"100%",transform:"scale(2.6)",marginTop:"60px"}} src={`${process.env.PUBLIC_URL}/assets/zhsy-map.png`} alt=""/>
      </div>

    </div>
  )
}

export default SyglPage