nazw/nngkxxdp/src/main/resources/static/natj/dataCenter/js/socialSecurity.js

function socialSecurity() {
    var jsonData = [{
        "year": "2021",
        "employedPerson": 3.74,
        "unemployPerson": 0.76,
        "unemployRate": "-",
        "ventureFund": 3486,
        "skillIdentification": 8330,
        "subsidy": 1.84,
        "totalDispute": 4259,
        "involvedPeople": 4270,
        "casesClose": 4012,
        "arbitratAward": 386,
        "closeRate": 97

    }, {
        "year": "2022年截至9月",
        "employedPerson": 3.8,
        "unemployPerson": 0.93,
        "unemployRate": "-",
        "ventureFund": 2466,
        "skillIdentification": 7489,
        "subsidy": 0.74,
        "totalDispute": 4246,
        "involvedPeople": 4300,
        "casesClose": 3697,
        "arbitratAward": 318,
        "closeRate": 87
    }, {
        "year": "2023年截至6月",
        "employedPerson": 2.92,
        "unemployPerson": 1.07,
        "unemployRate": 5.5,
        "ventureFund": 1701,
        "skillIdentification": 5490,
        "subsidy": 0.23,
        "totalDispute": 3294,
        "involvedPeople": 3302,
        "casesClose": 2655,
        "arbitratAward": 165,
        "closeRate": 65
    }]
    // 初始化年份
    // console.log(document.getElementById("year"))
    // document.getElementById("year").value='2023年截至6月';
    $('#year').on('change', function () {
        var value = $(this).val();
        for (var i = 0; i < jsonData.length; i++) {
            if (jsonData[i].year == value) {
                var itemDataHtml = `
                    <li>
                        <img src="images/content_icon_one.png" alt="">
                        <div class="right">
                            <div>城镇新增就业人数</div>
                            <div class="bottom">
                                <div class="number">`+ jsonData[i].employedPerson + `</div>
                                <div class="unit">万人</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="images/content_icon_two.png" alt="">
                        <div class="right">
                            <div>城镇登记失业人员就业人数</div>
                            <div class="bottom">
                                <div class="number">`+ jsonData[i].unemployPerson + `</div>
                                <div class="unit">万人</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="images/content_icon_three.png" alt="">
                        <div class="right">
                            <div>城镇调查失业率</div>
                            <div class="bottom">
                                <div class="number">`+ jsonData[i].unemployRate + `</div>
                                <div class="unit">%</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="images/content_icon_four.png" alt="">
                        <div class="right">
                            <div>创业贷款发放金额</div>
                            <div class="bottom">
                                <div class="number">`+ jsonData[i].ventureFund + `</div>
                                <div class="unit">万元</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="images/content_icon_five.png" alt="">
                        <div class="right">
                            <div>参加职业技能等级评价</div>
                            <div class="bottom">
                                <div class="number">`+ jsonData[i].skillIdentification + `</div>
                                <div class="unit">人</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="images/content_icon_six.png" alt="">
                        <div class="right">
                            <div>补贴性职业培训人数</div>
                            <div class="bottom">
                                <div class="number">`+ jsonData[i].subsidy + `</div>
                                <div class="unit">万人</div>
                            </div>
                        </div>
                    </li>
                </ul>`
                // PC端表格
                var shbzTableHtml = `
                    <div style="text-align: center;width:100%;font-size: 22px;color: #333333;margin: 20px auto;">劳动争议案件
                    </div>
                    <ul class="title">
                        <li style="width: 201px;">年份</li>
                        <li><span>纠纷总数</span><span>（件）</span></li>
                        <li><span>涉及人数</span><span>（个）</span></li>
                        <li><span>结案数量</span><span>（件）</span></li>
                        <li><span>仲裁裁决</span><span>（件）</span></li>
                        <li><span>结案率</span><span>（%）</span></li>
                    </ul>
                    <ul class="number">
                        <li style="width: 200px;">`+ jsonData[i].year + `</li>
                        <li>`+ jsonData[i].totalDispute + `</li>
                        <li>`+ jsonData[i].involvedPeople + `</li>
                        <li>`+ jsonData[i].casesClose + `</li>
                        <li>`+ jsonData[i].arbitratAward + `</li>
                        <li>`+ jsonData[i].closeRate + `</li>
                    </ul>
                `
                // 移动端表格
                var shbzTableHtmlm = `
                <div style="text-align: center;width:100%;font-size: 20px;color: #333333;margin: 20px auto;">劳动争议案件
                    </div>
                    <ul class="title">
                        <li style="width:121px;">年份</li>
                        <li><span>纠纷总数</span><span>（件）</span></li>
                        <li><span>涉及人数</span><span>（个）</span></li>
                    </ul>
                    <ul class="number">
                        <li>`+ jsonData[i].year + `</li>
                        <li>`+ jsonData[i].totalDispute + `</li>
                        <li>`+ jsonData[i].involvedPeople + `</li>
                    </ul>
                    <div class="title">
                        <li style="width:121px;"><span>结案数量</span><span>（件）</span></li>
                        <li><span>仲裁裁决</span><span>（件）</span></li>
                        <li><span>结案率</span><span>（%）</span></li>
                    </div>
                    <div class="number">
                        <li>`+ jsonData[i].casesClose + `</li>
                        <li>`+ jsonData[i].arbitratAward + `</li>
                        <li>`+ jsonData[i].closeRate + `</li>
                    </div>
                `
                $(".itemData").empty().html(itemDataHtml)
                $(".shbzTable").empty().html(shbzTableHtml)
                $(".shbzTablem").empty().html(shbzTableHtmlm)

            }
        }
    })
}