<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>首页介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="container">
    <div class="travel" style="height: 68%;">
        <div style="width: 30%;">
            <div class="wddbrw_head">
                <h1>知联会职务</h1>
            </div>
            <div class="box" style="height: calc(50% - 60px);">
                <div id="pieChart1" style="width: 100%; height: 100%;"></div>
            </div>
            <div class="wddbrw_head" style="margin-top: 20px;margin-bottom: 10px;">
                <h1>政治面貌情况</h1>
            </div>
            <div class="box" style="height: calc(50% - 60px);display: flex;margin: 0 10px;">
                <div id="pieChart2" style="width: 50%; height: 100%;"></div>
                <div id="plotChart3" style="width:50%; height: 100%;"></div>
            </div>
        </div>
        <div style="width: 40%;">
             <div style="width:100%;display: flex;">
                 <div class="arrange div1">
                     <div style="margin-top: 10px;">知联会干部在库数</div>
                     <div style="font-size: 26px;font-style: italic;margin-top: 6px;">5321</div>
                 </div>
                 <div class="arrange div2">
                     <div><img style="width: 40px;height: 40px;" src="/img/main/presidentOne.png"/></div>
                     <div style="margin-left: 20px;">
                         <div>会长</div>
                         <div><span style="font-size: 24px;font-style: italic;margin-right: 10px;color: #FF620D;">1</span>人</div>
                     </div>
                 </div>
                 <div class="arrange div3">
                     <div><img style="width: 40px;height: 40px;" src="/img/main/presidentTwo.png"/></div>
                     <div style="margin-left: 20px;">
                         <div>副会长</div>
                         <div><span style="font-size: 24px;font-style: italic;margin-right: 10px;color: #016BFF;">5</span>人</div>
                     </div>
                 </div>
             </div>
            <div class="wddbrw_head" style="margin-top: 20px;margin-bottom: 10px;">
                <h1>近期培训活动</h1>
            </div>
            <div class="box" style="height: calc(100% - 180px);display: flex;margin: 0 10px;">
                <div  style="width:98%;display: flex;height: 100%">
                    <table style="width: 100%;font-size: 18px">
                        <tr style="width: 100%">
                            <td style="width: 70%;text-align: left">***************************活动</td>
                            <td style="width: 20%;text-align: right"> 2024-01-09</td>
                        </tr>

                        <tr style="width: 100%">
                            <td style="width: 70%;text-align: left">***************************活动</td>
                            <td style="width: 20%;text-align: right"> 2024-01-09</td>
                        </tr>
                        <tr style="width: 100%">
                        <td style="width: 70%;text-align: left">***************************活动</td>
                        <td style="width: 20%;text-align: right"> 2024-01-09</td>
                    </tr>
                        <tr style="width: 100%">
                        <td style="width: 70%;text-align: left">***************************活动</td>
                        <td style="width: 20%;text-align: right"> 2024-01-09</td>
                    </tr>

                        <tr style="width: 100%">
                        <td style="width: 70%;text-align: left">***************************活动</td>
                        <td style="width: 20%;text-align: right"> 2024-01-09</td>
                    </tr>
                        <tr style="width: 100%">
                            <td style="width: 70%;text-align: left">***************************活动</td>
                            <td style="width: 20%;text-align: right"> 2024-01-09</td>
                        </tr>
                        <tr style="width: 100%">
                            <td style="width: 70%;text-align: left">***************************活动</td>
                            <td style="width: 20%;text-align: right"> 2024-01-09</td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>
        <div style="width: 30%;">
            <div class="wddbrw_head">
                <h1>学历、学位情况</h1>
            </div>
            <div class="box" style="height: calc(100% - 60px);">
                <div style="display: flex;justify-content: center;">
                    <div class="cut active" style="">全日制教育</div>
                    <div class="cut">在职教育</div>
                </div>
                <div id="barChart2" style="width: 100%; height: calc(50% - 16px);"></div>
                <div id="pieChart3" style="width: 100%; height: calc(50% - 16px);"></div>
            </div>
        </div>
    </div>
    <div class="travel" style="height: 30%;">
        <div style="width: 30%;">
            <div class="wddbrw_head">
                <h1>性别及年龄分布</h1>
            </div>
            <div class="box" style="height: calc(100% - 30px);">
                <div id="barChart1" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
        <div style="width: 70%;">
            <div class="wddbrw_head">
                <h1>单位类别情况</h1>
            </div>
            <div class="box" style="height: calc(100% - 30px);">
                <div id="barChart3" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.7}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.7.3}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.3}"></script>
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: footer" />
<script type="text/javascript">
    var prefix = "[[@{/}]]" + "system/information";
    init();

    //数据初始化加载
    function init() {
        $(".cut").click(function () {
            $('.cut').removeClass('active');
            $(this).addClass('active');
        });
        // $.ajax({
        //     url: prefix + "/dashboard",
        //     type: "get",
        //     success: function(result) {
        //        console.log(result);
        //     }
        // });
        var array1 = [
            {name:'正局级XX人',value:235}, {name:'副局级XX人',value:274},
            {name:'正处级XX人',value:310}, {name:'正科级XX人',value:335}
        ];
        var grid = {left: '10%', right: '6%', bottom: '3%', top:'6%'}
        //饼图1
        pieChartMethod('pieChart1',array1,"职务层次情况",'80%',"",grid,"",true);
        array1 = [
            {name:'民革',value:20}, {name:'无党派',value:20},{name:'群众',value:20},
            {name:'台盟',value:20}, {name:'致公党',value:20},{name:'九三学社',value:20},
            {name:'农工党',value:20}, {name:'民进',value:20},{name:'民建',value:20}, {name:'民盟',value:20}
        ];
        //饼图2
        pieChartMethod('pieChart2',array1,"政治面貌",['45%', '75%'],"",grid,"",true);
        //阶梯图
        var data = [
            { value: 8, name: '副部级' }, { value: 23, name: '正局级' }, { value: 100, name: '副局级' },
            { value: 699, name: '正处级' }, { value: 1640, name: '副处级' }
        ]
        funnelPlot('plotChart3',data);
        //柱状图
        var yAxis = {
            type: 'category',
            data: ['40岁以下', '40-50岁', '50-55岁', '55以上'],
            axisLine: {show: false,},
            axisTick: {show: false,}
        };
        var series = [{
            name: '男',
            type: 'bar',
            data: [123, 76, 66, 21],
            emphasis: {
                focus: 'series'
            },
            label: {
                show: true,
                position: 'right'
            }
        }, {
            name: '女',
            type: 'bar',
            data: [95, 91, 73, 29],
            emphasis: {
                focus: 'series'
            }, label: {
                show: true,
                position: 'right'
            }
        }]
        //柱状图1
        var grid1 = {left: '15%', right: '6%', bottom: '1%', top:'13%'};
        barChartMethod("barChart1",{trigger: 'axis'},{data: ['男', '女'],left: '3%',},{type: 'value',
            axisLine: {show: false,},axisLabel: {show: false,}, axisTick: {show: false,},splitLine: {show: false}},yAxis,grid1,series);
        grid1 = {left: '15%', right: '6%', bottom: '12%', top:'4%'};
        series = [{
            name: '数据',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130,120],
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colors = ['#34b3a0', '#ff6347'];
                        return colors[params.dataIndex % 2];
                    }
                }
            }
        }];
        yAxis = {
            type: 'category',
            data: ['研究生', '大学', '大专', '中专', '职高','中央党校研究生','中央党校大学','其他'],
            axisTick: {show: false,}
        }
        //柱状图2
        barChartMethod("barChart2",{trigger: 'axis'},"",{type: 'value',axisLine: {show: false,},axisTick: {show: false,}},
            yAxis,grid1,series);
        var itemStyle = {borderColor: '#fff',borderWidth: 2}
        //饼图3
        array1 = [
            {name:'博士',value:2}, {name:'硕士',value:3},{name:'学士',value:5}, {name:'其他',value:1}
        ];
        pieChartMethod('pieChart3',array1,"学位情况",'80%',"",grid,"",true,itemStyle);
        //柱状图3
        var data1 = [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130];
        var maxHeight = Math.max(...data1);
        var xAxis = {
            type: 'category', data: ['行政机关', '人大机关', '政协机关', '民主党派机关', '司法机关', '高校', '科研院所','其他事业单位','群团组织','在沪央企','地方国企','中央在沪单位','部队','其他'],
            axisTick: {show: false,},
            axisLabel: {
                interval: 0  // 强制显示所有标签
            }
        }
        yAxis = {
            type: 'value',
            axisLine: {show: false,}, axisTick: {show: false,},splitLine: {show: false}
        }
        var series1 = [{
            name: '灰色背景',
            type: 'bar',
            data: data1.map(value => maxHeight), // 使用最大高度填充
            itemStyle: {
                color: '#ccc', // 灰色
                opacity: 0.5 // 可选：使灰色柱子稍微透明
            },
            barGap: '-100%', // 使灰色柱子与实际数据柱子重叠
            tooltip: {
                show: false //禁用灰色柱子的 tooltip
            },
            silent: true //禁用柱子的悬停和点击事件
        }, {
            name: '单位类别',
            type: 'bar',
            data: data1,
            itemStyle: {
                color: '#73C9C8' // 实际数据的颜色
            }
        }];
        var grid3 = {left: '5%', right: '2%', bottom: '13%', top:'6%'}
        barChartMethod("barChart3","","",xAxis,yAxis,grid3,series1);
    }

    //饼图-id-数据-名称-弧度-位置-grid-legend-是否需要线
    function pieChartMethod(id,array,name,radius,center,grid,legend,isLabel,itemStyle){
        var pieChart = echarts.init(document.getElementById(id));
        var pieOption = {
            tooltip: {
                trigger: 'item'
            },
            legend: legend,
            series: [{
                name: name,
                type: 'pie',
                data: array,
                labelLine: {
                    length: 8,
                    length2: 4
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        if (grid) pieOption.grid = grid;
        if (radius) pieOption.series[0].radius = radius;
        if (center) pieOption.series[0].center = center;
        if (!isLabel) {
            pieOption.series[0].label = {show: false};
            pieOption.series[0].labelLine = {show: false};
        }
        if (itemStyle) pieOption.series[0].itemStyle = itemStyle;
        pieChart.setOption(pieOption);
    }

    //漏斗图
    function funnelPlot(id,data){
        var myChart = echarts.init(document.getElementById(id));
        var changeData = handleData(data);
        var option = {
            // tooltip: {
            //     trigger: 'item',
            //     formatter: function(params) {
            //         return params.name + ': ' + data[params.dataIndex].value;
            //     }
            // },
            series: [{
                    type: 'funnel',
                    left: '5%',
                    top: 10,
                    bottom: 10,
                    width: '90%',
                    min: 0,
                    max: 10,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'ascending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: changeData
                }
            ]
        };
        myChart.setOption(option);
    }

    //柱状图-id--tooltip-legend-xAxis-yAxis-grid-series
    function barChartMethod(id,tooltip,legend,xAxis,yAxis,grid,series){
        var barChart = echarts.init(document.getElementById(id));
        var barOption = {
            tooltip: {

            },
        };
        if (tooltip) barOption.tooltip = tooltip;
        if (legend) barOption.legend = legend;
        if (xAxis) barOption.xAxis = xAxis;
        if (yAxis) barOption.yAxis = yAxis;
        if (grid) barOption.grid = grid;
        if (series) barOption.series = series;
        barChart.setOption(barOption);
    }

    // 处理数据集合
    function handleData(data){
        return data.map((item,index) => {
            return {
                name: item.name+" "+item.value+" 人",
                value: (index+1)*2
            };
        });
    }
</script>
</body>
</html>
