<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <jsp:include page="../../../../common/newDark/head.jsp"></jsp:include>
</head>
<body>
<jsp:include page="../../../../common/newDark/body_header.jsp">
    <jsp:param name="title" value="河湖河长概况"/>
</jsp:include>

<div class="layout">
    <div class="container-fluid">
        <div class="row clearfix" style="background-image: url(<%=basePath%>/resource/images/water/bg-water1.png);background-repeat: no-repeat;background-size:100% 100%;">
            <div class="col-md-12" style="margin: 20px 0;">
                <div class="col-md-3">
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">河流概况</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart1" style="width: 100%;height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">衡水湖概况</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart8" style="width: 100%;height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">衡水湖蓄水量</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart9" style="width: 100%;height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">河流总蓄水量</div>
                            <div class="ibox shortcut">
                                <div class="ibox-content-noline">
                                    <div id="divChart2" style="width: 100%;height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="row" style="margin-top: 20px;">
                        <button onclick="showTable()" style="float: right;width:72px;background: teal;color: #ffffff;outline: none;margin-top: 20px;cursor: pointer;">
                            水质目标
                        </button>
                        <div class="col-md-12 kuang">
                            <div class="col-md-4 yuanjiao">衡水市主要河流概况</div>
                            <div class="ibox-content-noline">
                                <div id="divChart13" style="width: 100%;height: 450px;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-3" style="padding: 0;width:24%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">河流蓄水量</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart3" style="width: 100%;height: 250px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-9"style="padding: 0;width:74%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">河流水位</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart4" style="width: 100%;height: 250px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12"style="padding: 0">
                            <div class="col-md-6" style="padding: 0;width:49%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">衡水湖蓄水</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart5" style="width: 100%;height: 275px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"style="padding: 0;width:49%;margin-left: 2%">
                                <div class="col-md-12 kuang" >
                                    <div class="col-md-4 yuanjiao">衡水湖水位</div>
                                    <div class="ibox shortcut">
                                        <div class="ibox-content-noline">
                                            <div id="divChart6" style="width: 100%;height: 275px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="tankuang" class="tankuang" style="display: none">
        <table>
            <tr style="background:teal;">
                <td style="color: #ffffff">河湖渠道名称</td>
                <td style="color: #ffffff">2017年</td>
                <td style="color: #ffffff">2018年</td>
                <td style="color: #ffffff">2019年</td>
                <td style="color: #ffffff">2020年</td>
            </tr>
            <tr>
                <td>滹沱河</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
            </tr>
            <tr>
                <td>滏阳新河</td>
                <td>劣V</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
            </tr>
            <tr>
                <td>滏东排河</td>
                <td>劣V</td>
                <td>劣V</td>
                <td>V</td>
                <td>V</td>
            </tr>
            <tr>
                <td>衡水湖</td>
                <td>III</td>
                <td>III</td>
                <td>III</td>
                <td>III</td>
            </tr>
            <tr>
                <td>卫运河-南运河</td>
                <td>劣V</td>
                <td>劣V</td>
                <td>V</td>
                <td>V</td>
            </tr>
            <tr>
                <td>滏阳河</td>
                <td>劣V</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
            </tr>
            <tr>
                <td>清凉江</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
            </tr>
            <tr>
                <td>江江河</td>
                <td>劣V</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
            </tr>
            <tr>
                <td>索泸河－老盐河</td>
                <td>劣V</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
                <td>氨氮≤6.5mg／L,其他指标为V类</td>
            </tr>
            <tr>
                <td>石津干渠</td>
                <td>III</td>
                <td>III</td>
                <td>III</td>
                <td>III</td>
            </tr>
        </table>
        <img onclick="hideTable()" style="cursor: pointer" src="<%=basePath%>/resource/images/icon_close.png" alt="">
    </div>
</div>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('divChart1'));
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    var myChart4 = echarts.init(document.getElementById('divChart4'));
    var myChart5 = echarts.init(document.getElementById('divChart5'));
    var myChart6 = echarts.init(document.getElementById('divChart6'));
    var myChart8 = echarts.init(document.getElementById('divChart8'));
    var myChart9 = echarts.init(document.getElementById('divChart9'));

    myChart1.setOption({
        series: [{
            name: '河流概况',
            type: 'liquidFill',
            data: [{
                name: ${riverLength!=null?riverLength:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n${riverCount}条总长{b} km',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;

    myChart8.setOption({
        series: [{
            name: '衡水湖概况',
            type: 'liquidFill',
            data: [{
                name: ${hshmj!=null?hshmj:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} km2',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;

    myChart9.setOption({
        series: [{
            name: '衡水湖蓄水量',
            type: 'liquidFill',
            data: [{
                name: ${hshxs!=null?hshxs:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} m3',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;

    myChart2.setOption({
        series: [{
            name: '河流总蓄水量',
            type: 'liquidFill',
            data: [{
                name: ${hlxs!=null?hlxs:0},
                value: 0.4
            }, 0.5, 0.4, 0.3],
            label: {
                normal: {
                    formatter: '{a}\n\n{b} m3',
                    textStyle: {
                        fontSize: 28,
                        fontStyle: 'normal'
                    }
                }
            },
            radius: '90%'
        }]
    }) ;

    var option3 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}m3 ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series : [
            {
                name: '河流蓄水量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }

    var option4 = {

        "title": {
            x: "4%",

            textStyle: {
                color: '#fff',
                fontSize: '22'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: '16',

            },
        },
        "tooltip": {
            "trigger": "axis",
            "axisPointer": {
                "type": "shadow",
                textStyle: {
                    color: "#fff"
                }

            },
        },
        "grid": {
            "borderWidth": 0,
            "top": 60,
            "bottom": 60,
            textStyle: {
                color: "#fff"
            }
        },
        "legend": {
            x: '4%',
            top: '11%',
            textStyle: {
                color: '#90979c',
            },
            "data": ['正常水位', '实际水位', '警戒水位']
        },


        "calculable": true,
        "xAxis": [{
            "type": "category",
            "axisLine": {
                lineStyle: {
                    color: '#90979c'
                }
            },
            "splitLine": {
                "show": false
            },
            "axisTick": {
                "show": false
            },
            "splitArea": {
                "show": false
            },
            "axisLabel": {
                "interval": 0,

            },
            "data": [],
        }],
        "yAxis": [{
            "type": "value",
            "splitLine": {
                "show": false
            },
            "axisLine": {
                lineStyle: {
                    color: '#90979c'
                }
            },
            "axisTick": {
                "show": false
            },
            "axisLabel": {
                "interval": 0,

            },
            "splitArea": {
                "show": false
            },

        }],

        "series": [{
            "name": "正常水位",
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
                "normal": {
                    "color": "rgba(255,144,128,1)",
                    "label": {
                        "show": true,
                        "textStyle": {
                            "color": "#fff"
                        },
                        "position": "insideTop",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [],
        },

            {
                "name": "实际水位",
                "type": "bar",
                "stack": "总量",
                "itemStyle": {
                    "normal": {
                        "color": "rgba(0,191,183,1)",
                        "barBorderRadius": 0,
                        "label": {
                            "show": true,
                            "position": "top",
                            formatter: function(p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },
                "data": []
            }, {
                "name": "警戒水位",
                "type": "line",
                "stack": "总量",
                symbolSize:10,
                symbol:'circle',
                "itemStyle": {
                    "normal": {
                        "color": "rgba(252,230,48,1)",
                        "barBorderRadius": 0,
                        "label": {
                            "show": true,
                            "position": "top",
                            formatter: function(p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },
                "data": []
            },
        ]
    }

    var option5 = {
        color: ['#87c6b5', 'red'],

        title : {
            text: '',
            subtext:'单位:平方米',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: ['蓄水量','死库容'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                axisLabel: {
                    formatter: '{value} ',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                type:'bar',
                data:[]
            }
        ]
    }

    var option6 = {
        color:  ['#87c6b5','#f19585','#2b61b4'],

        title : {
            text: '',
            subtext:'单位:m',
            subtextStyle:{
                color: '#fff'
            },
            top:'10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            left: 'right',
            top:'20',
            textStyle:{
                color:'#fff',
                fontSize:14,
            },
            data:['正常水位','警戒水位']
        },
        xAxis: [
            {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'category',
                data: ['实际水位'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                axisLabel: {
                    formatter: '{value} ',
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            {
                show:false,
                type: 'value',
                name: ''
            }
        ],
        series: [
            {
                name:'实际水位',
                type:'bar',
                "stack": "总量",
                data:[]
            },
            {
                name:'正常水位',
                type:'bar',
                "stack": "总量",
                data:[]
            },
            {
                name:'警戒水位',
                type:'bar',
                "stack": "总量",
                data:[]
            }
        ]
    }



    var myChart13 = echarts.init(document.getElementById('divChart13'));

    var renderFunc = function () {
        $.get('<%=basePath%>/topic/water/riverChief/getHeliuXushui.action').done(function (data) {
            option3.series[0].data = data.list ;
            myChart3.setOption(option3);
        })

        $.get('<%=basePath%>/topic/water/riverChief/getHeliuShuiwei.action').done(function (data) {
            option4.xAxis[0].data = data.names      ;
            option4.series[0].data = data.zcshuiweis ;
            option4.series[1].data = data.nowshiweis ;
            option4.series[2].data = data.jingjieshuiwei ;

            myChart4.setOption(option4);
        })

        $.get('<%=basePath%>/topic/water/riverChief/getHshxushui.action').done(function (data) {
            option5.series[0].data = data.value ;
            myChart5.setOption(option5);
        })

        $.get('<%=basePath%>/topic/water/riverChief/getHshshuiwei.action').done(function (data) {
            option6.series[0].data = [data.level] ;
            option6.series[1].data = [data.normal] ;
            option6.series[2].data = [data.warning] ;
            myChart6.setOption(option6);
        })
        heliuGaikuang() ;

    };
    function heliuGaikuang() {
        $.get('<%=basePath%>/topic/water/riverChief/getHeliuGaikuang.action').done(function (data) {
            var array1 = data.array1;
            var array = array1.reverse();
            var startSopPoint = data.startSopPoint;
            var startSopPoint1 = startSopPoint.reverse();
            var riverImpoundages = data.riverImpoundages;
            var riverImpoundages1 = riverImpoundages.reverse();
            var normals = data.normals;
            var normals1 = normals.reverse();
            var warnings = data.warnings;
            var warnings1 = warnings.reverse();
            var flowThroughs = data.flowThroughs ;
            var flowThroughs1 = flowThroughs.reverse();
            var waterLevels = data.waterLevels ;
            var waterLevels1 = waterLevels.reverse();
            var riverChiefs = data.riverChiefs ;
            var riverChiefs1 = riverChiefs.reverse();
            var option13 = {
                tooltip: {
                    show:true,
                    trigger: 'axis',
                    formatter: function (params) {
                        return array1[params[0].dataIndex]+'<br/>'+
                            '河长：'+riverChiefs1[params[0].dataIndex]+'<br/>'+
                            '长度：'+params[0].data+'km<br/>'+
                            '起止点：'+startSopPoint1[params[0].dataIndex]+'<br/>'+
                            '蓄水量：'+riverImpoundages1[params[0].dataIndex]+'m3<br/>'+
                            '水位：'+waterLevels1[params[0].dataIndex]+'m<br/>'+
                            '正常水位：'+normals1[params[0].dataIndex]+'m<br/>'+
                            '警戒水位：'+warnings1[params[0].dataIndex]+'m<br/>'+
                            '所跨区县：'+flowThroughs1[params[0].dataIndex]+'<br/>' ;
                    },
                },
                grid: {
                    top: '2%',
                    bottom: '1%',
                    left:'5%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            show: false,
                            interval: 1,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }

                    }
                ],
                yAxis:{
                    type: 'category',
                    data: [],
                    axisLabel: {
                        color:"rgba(255,255,255,1)",
                        formatter: function (value) {
                            return '{' + value + '| }{value|'+array[value]+'}';
                        },
                        rich: {
                            value: {
                                align: 'center',
                                padding:[0,0,0,-5],
                                fontSize:14
                            }
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true
                    },
                    zlevel: 99
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: '60%',
                        barCategoryGap: '60%',
                        itemStyle: {
                            normal: {
                                barBorderRadius:[10, 10, 10, 10],
                                color: function(params) {
                                    if(params.data>70){
                                        return '#5cc84d'
                                    }else{
                                        return '#7dfba2'
                                    }

                                },

                                label: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '14'
                                    },
                                    // formatter: '{c}km'
                                    formatter: function (params) {
                                        return params.data+'km 河长：'+ riverChiefs1[params.dataIndex] ;
                                    }
                                }
                            }
                        },
                        data:[]
                    }]
            };
            option13.yAxis.data = data.array2 ;
            option13.series[0].data = data.riverLengths ;
            option13.series[0].data.reverse();

            myChart13.setOption(option13) ;
        })
    }
    renderFunc();

    function showTable() {
        $("#tankuang").show() ;
    }
    function hideTable() {
        $("#tankuang").hide() ;
    }
</script>
</body>
</html>