<!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: 100%; height: 100%;"></div>
            </div>
        </div>
        <div style="width: 40%;margin-left: 5px;margin-right: 5px;">
             <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>
                         <div>平均参会率</div>
                         <div style="font-size: 10px;">
                             <span style="font-size: 24px;font-style: italic;margin-right: 10px;color: #FF620D;">95</span>%
                         </div>
                     </div>
                 </div>
                 <div class="arrange div3">
                     <div>
                         <div>未参会率</div>
                         <div style="font-size: 10px;">
                             <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:100%;height: 100%;overflow: hidden;">
                    <div class="item">
                        <div class="left-content">
                            <span class="ball"></span>
                            这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试
                        </div>
                        <div class="right-time">2024-12-10</div>
                    </div>
                    <div class="item">
                        <div class="left-content">
                            <span class="ball"></span>
                            这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试
                        </div>
                        <div class="right-time">2024-12-10</div>
                    </div>
                    <div class="item">
                        <div class="left-content">
                            <span class="ball"></span>
                            这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试
                        </div>
                        <div class="right-time">2024-12-10</div>
                    </div>
                    <div class="item">
                        <div class="left-content">
                            <span class="ball"></span>
                            这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试
                        </div>
                        <div class="right-time">2024-12-10</div>
                    </div>
                    <div class="item">
                        <div class="left-content">
                            <span class="ball"></span>
                            这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试
                        </div>
                        <div class="right-time">2024-12-10</div>
                    </div>
                    <div class="item">
                        <div class="left-content">
                            <span class="ball"></span>
                            这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试
                        </div>
                        <div class="right-time">2024-12-10</div>
                    </div>
                    <div class="item">
                        <div class="left-content">
                            <span class="ball"></span>
                            这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试
                        </div>
                        <div class="right-time">2024-12-10</div>
                    </div>
                </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%;margin-left: 5px;">
            <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 color = ['#105DA5', '#D1E3F2','#578DC0','#67ACD4'];
        var color1 = ['#FFAC74', '#5FCBF2','#FF8ED0','#9786FF'];
        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%'}
        array1.some(function (item,index){
            item.itemStyle = {
                color: color[index]
            }
        })
        //饼图1
        pieChartMethod('pieChart1',array1,"职务层次情况",'80%',"",grid,"",true);
        array1 = [
            {name:'数据1',value:1200}, {name:'数据2',value:600},{name:'数据3',value:800}, {name:'数据4',value:1000},
        ];
        //对比例进行单独处理
        handleAccount(array1);
        //饼图2
        var legend = {
            orient: 'vertical', right: '10%', bottom: "15%", icon: 'circle', formatter: function(name) {
                var obj = array1.find(item => item.name === name);
                return `数据统计：{name|${name}}{value|${obj.value}件}{account|${obj.account}}%`;
            },
            textStyle: {rich: {name: {padding: [0, 10, 0, 0]},value:{width: 50}}}
        }
        array1.some(function (item,index){
            item.itemStyle = {
                color: color1[index]
            }
        })
        pieChartMethod('pieChart2',array1,"数据分析",['45%', '75%'],['25%', '50%'],grid,legend,false,"");
        //柱状图
        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'},
            itemStyle: {normal: {color: '#105DA5'}},
            label: {show: true, position: 'right'}
        }, {
            name: '女',
            type: 'bar',
            data: [95, 91, 73, 29],
            emphasis: {focus: 'series'},
            itemStyle: {normal: {color: '#D1E3F2'}},
            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:'6%'};
        series = [{
            name: '数据',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130,120],
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colors = ['#105DA5', '#D1E3F2'];
                        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}
        ];
        array1.some(function (item,index){
            item.itemStyle = {
                color: color[index]
            }
        });
        pieChartMethod('pieChart3',array1,"学位情况",'80%',"",grid,"",true,itemStyle);
        //柱状图3
        var data1 = [
            {name:'行政机关',value:120},
            {name:'人大机关',value:200},
            {name:'政协机关',value:150},
            {name:'民主党派机关',value:80},
            {name:'司法机关',value:70},
            {name:'高校',value:110},
            {name:'科研院所',value:130},
            {name:'其他事业单位',value:120},
            {name:'群团组织',value:40},
            {name:'在沪央企',value:30},
            {name:'地方国企',value:20},
            {name:'中央在沪',value:10},
            {name:'部队',value:5}
        ];
        var names = data1.map(item => item.name);
        var mainType = ['行政机关', '人大机关', '政协机关','民主党派机关', '司法机关','高校','科研院所','其他事业单位'];
        var otherType = ['群团组织', '在沪央企', '地方国企','中央在沪', '部队'];
        var barColor = ['#205ACF','#1890FF','#2FAB34','#E44C4C','#FFAB18'];
        var xAxis = {
            type: 'category', data: mainType.concat(['其他']),
            axisTick: {show: false,}
        }
        yAxis = {
            type: 'value',
            name:"单位：个",
            nameLocation: 'end',
            nameTextStyle: {
                padding: [0, 0, 0, -30]
            },
            axisTick: { inside: true,alignWithLabel: true},splitLine: {lineStyle: {type: 'dashed'}}
        }
        var series1 = names.map((name, index) => {
            var valueArray = [0,0,0,0,0,0,0,0,0];
            if (mainType.includes(name)){
                valueArray[index] = (data1.filter(item => item.name == name))[0].value;
                return {
                    name,
                    type: 'bar',
                    stack: 'total',
                    barWidth: 50,
                    data: valueArray,
                    itemStyle: {
                        color: '#1890FF'
                    }
                };
            }else {
                valueArray[valueArray.length - 1] = (data1.filter(item => item.name == name))[0].value;
                return {
                    name,
                    type: 'bar',
                    stack: 'total',
                    barWidth: 30,
                    emphasis: {focus: 'series'},
                    data: valueArray,
                    itemStyle: {
                        color: barColor[otherType.indexOf(name)]
                    }
                }
            }
        });
        var tooltip = {
            trigger: 'axis',
            backgroundColor: '#ffffff',
            textStyle: {
                color: 'black'
            },
            borderColor: '#F5F5F5',
            borderWidth: 1,
            extraCssText: 'box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);',
            axisPointer: {type: 'none'},
            formatter: function (params) {
                var tooltipContent = `${params[0].name}<br/>`;
                params.forEach(param => {
                    if (param.value >0){
                        tooltipContent += `<span style="display: inline-block; width: 10px; height: 10px; background-color: ${param.color};border-radius: 50%;margin-right: 5px;"></span>
                            ${param.seriesName}: ${param.value}<br/>`;
                    }
                })
                return tooltipContent;
            }
        }
        var grid3 = {left: '5%', right: '2%', bottom: '13%', top:'18%'};
        barChartMethod("barChart3",tooltip,"",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,
                label:{
                    color:'#000000'
                },
                labelLine: {
                    length: 6,
                    length2: 4,
                    lineStyle: {
                        color: '#DDDDDD'
                    }
                },
                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);
    }

    //柱状图-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 handleAccount(data){
        // 计算总值
        var total = data.reduce((sum, item) => sum + item.value, 0);
        // 计算整数比例
        var percentages = data.map(item => Math.floor((item.value / total) * 100));
        // 计算调整后的最后一个比例，以确保总和为 100%
        var sumOfPercentages = percentages.reduce((sum, value) => sum + value, 0);
        // 调整最后一个比例
        percentages[percentages.length - 1] += (100 - sumOfPercentages);
        data.some(function (item,index){
            item.account = percentages[index];
        });
    }
</script>
</body>
</html>
