添加社保等页面

nngkxxdp/src/main/resources/static/natj/dataCenter/css/conmon.css

@@ -0,0 +1,66 @@
+/*清除自带样式*/
+*{
+	margin: 0;
+	padding: 0;
+    outline: none;
+    border: 0;
+    font-family: Microsoft YaHei;
+}
+textarea,button{
+    resize: none;
+}
+ul,li{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+/*适配*/
+@media screen and (max-width: 320px) {
+    html {
+        font-size: 9px;
+    }
+}
+@media screen and (min-width: 320px) {
+    html {
+        font-size: 14px;
+    }
+}
+
+@media screen and (min-width: 360px) {
+    html {
+        font-size: 16px;
+    }
+}
+
+@media screen and (min-width: 400px) {
+    html {
+        font-size: 18px;
+    }
+}
+
+@media screen and (min-width: 440px) {
+    html {
+        font-size: 20px;
+    }
+}
+
+@media screen and (min-width: 480px) {
+    html {
+        font-size: 22px;
+    }
+}
+
+@media screen and (min-width: 640px) {
+    html {
+        font-size: 28px;
+    }
+}
+/*蒙层*/
+.mask{
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    position: absolute;
+    z-index: 998;
+}

nngkxxdp/src/main/resources/static/natj/dataCenter/css/index.css

@@ -0,0 +1,249 @@
+/* 菜单部分 */
+.main {
+    width: 1400px;
+    margin: 10px auto;
+    display: flex;
+}
+
+.arrow {
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid #125DB2;
+    position: absolute;
+    right: -10px;
+}
+
+.main .menu {
+    width: 150px;
+    height: 729px;
+    background: #EBF4FF;
+}
+
+.menu .tabs li {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #333333;
+    padding: 0 15px;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+}
+
+.menu .tabs li.click {
+    background: #125DB2;
+    color: #fff;
+}
+/* 公共样式 */
+.content {
+    height: 729px;
+    width: -moz-calc(100% - 150px);
+    width: -webkit-calc(100% - 150px);
+    width: calc(100% - 150px);
+}
+.content .items{
+    width: 100%;
+    height: 100%;
+}
+
+.content .year {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    color: #333333;
+}
+
+.content .year select {
+    width: 125px;
+    height: 34px;
+    background: #FFFFFF;
+    border: 1px solid #D5D5D5;
+    border-radius: 4px;
+    text-align: center;
+    cursor: pointer;
+}
+/* 社会保障 */
+.div-shbz .itemData {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.div-shbz .itemData li {
+    width: 403px;
+    height: 130px;
+    background: #F0F0F0;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    color: #333333;
+    margin-top: 19px;
+}
+
+.div-shbz .itemData li .right .bottom {
+    display: flex;
+    align-items: flex-end;
+    margin-top: 16px;
+}
+
+.div-shbz .itemData li .right .bottom .number {
+    font-size: 34px;
+    font-weight: bold;
+    font-style: italic;
+    color: #004A93;
+}
+
+.div-shbz .itemData li .right .bottom .unit {
+    color: #999999;
+    margin-left: 10px;
+}
+.div-shbz .shbzTable {
+    margin-top: 70px;
+}
+
+.div-shbz .shbzTable .title,
+.div-shbz .shbzTable .number {
+    display: flex;
+    font-size: 18px;
+    font-family: Microsoft YaHei;
+    color: #FFFFFF;
+    margin-left: 10px;
+}
+
+.div-shbz .shbzTable .title li,
+.div-shbz .shbzTable .number li {
+    width: 260px;
+    height: 60px;
+    background: #7293B9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #fff;
+}
+
+.div-shbz .shbzTable .number li {
+    background: #fff;
+    color: #333;
+    border: 1px solid #7293B9;
+    border-right: none;
+}
+
+.div-shbz .shbzTable .number li:last-child,
+.div-shbz .shbzTable .title li:last-child {
+    border-right: 1px solid #7293B9;
+}
+
+/* 卫生医疗 */
+.div-wsyl {
+    height: 100%;
+    padding-left: 10px;
+    position: relative;
+}
+
+.div-wsyl .bg {
+    position: absolute;
+    width: 100%;
+    height: 300px;
+    bottom: 20px;
+}
+
+.div-wsyl .cont {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.div-wsyl .cont .detail {
+    width: 338px;
+    border-radius: 10px;
+}
+
+.div-wsyl .cont .detail {
+    padding: 30px 15px;
+    box-sizing: border-box;
+    margin-bottom: -15px;
+}
+
+.div-wsyl .cont .list li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.div-wsyl .cont .list li span:first-child {
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    color: #666666;
+    line-height: 36px;
+}
+
+.div-wsyl .cont .list li span:last-child {
+    font-size: 20px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    font-style: italic;
+    color: #125DB2;
+    line-height: 36px;
+}
+/* 卫生医疗 */
+.div-wsyl .range {
+    width: 99%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.div-wsyl .range button {
+    width: 63px;
+    height: 34px;
+    background: #FFFFFF;
+    border: 1px solid #999999;
+    color: #999999;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    cursor: pointer;
+}
+
+.div-wsyl .range button.click {
+    border: 1px solid #4582EC !important;
+    color: #4684ED;
+}
+/* 社会救助 */
+.div-shjz .title {
+    width: 100%;
+    height: 50px;
+    margin: 10px auto;
+    background: #EBF4FF;
+    margin-left: 10px;
+}
+
+.div-shjz .title {
+    display: flex;
+    justify-content: center;
+}
+
+.div-shjz .title .list {
+    width: 208px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    color: #333333;
+    text-align: center;
+    margin: 0 47px;
+    cursor: pointer;
+}
+
+.div-shjz .title .click {
+    background: #125DB2;
+    color: #fff;
+}

nngkxxdp/src/main/resources/static/natj/dataCenter/culturalTourism.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数据中心</title>
+    <link rel="stylesheet" href="css/conmon.css">
+    <link rel="stylesheet" href="css/index.css">
+    <style>
+        #whlyEchar {
+            width: 1450px;
+            height: 710px;
+            margin-left: -65px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <div class="menu">
+            <ul class="tabs">
+                <li onclick="window.location.href='socialSecurity.html'">
+                    <img src="images/menu_shbz.png" alt="" style="width: 27px;height: 21px;"
+                        data-name="shbz"><span>社会保障</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li class="click" onclick="window.location.href='culturalTourism.html'"><img src="images/menu_whlxp.png"
+                        alt="" style="width: 22px;height: 26px;" data-name="whlx"><span>文化旅游</span>
+                    <div class="arrow"></div>
+                </li>
+                <li onclick="window.location.href='healthCare.html'"><img src="images/menu_wsyl.png" alt=""
+                        style="width: 30px;height: 29px;" data-name="wsyl"><span>卫生医疗</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li onclick="window.location.href='socialAssistance.html'"><img src="images/menu_shjz.png" alt=""
+                        style="width: 31px;height: 27px;" data-name="shjz"><span>社会救助</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+            </ul>
+        </div>
+        <div class="content">
+            <div class="year"><span>年份：</span>
+                <select>
+                    <option value="2021">2021年</option>
+                    <option value="2022">2022年</option>
+                </select>
+            </div>
+            <div class="items div-wsyl">
+                <div class="range">
+                    <button class="thisMonth click" style="border-radius: 4px 0px 0px 4px;border-right: none;"
+                        onclick="thisMonth()">本月</button>
+                    <button class="cumulat" style="border-radius: 0px 4px 4px 0px;border-left: none;"
+                        onclick="cumulat()">累计</button>
+                </div>
+                <div id="whlyEchar"></div>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="js/jquery-3.5.1.min.js"></script>
+<script src="js/echarts.min.js"></script>
+<script>
+    // 文化旅游
+    var chartDom = document.getElementById('whlyEchar');
+    var myChart = echarts.init(chartDom);
+    var option;
+    option = {
+        grid: {
+            // 网格线配置
+            show: true,
+            lineStyle: {
+                color: ["#e9e9e9"],
+                width: 1,
+                type: "solid",
+            },
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor: "rgb(0 0 0 / 40%)",
+            borderColor: 'none',
+            formatter: function (params) {
+                var html = "";
+                html = `<div
+                    style="font-size: 14px;font-family: Microsoft YaHei;color: #FFFFFF;width: 306px;border-radius: 10px;box-sizing: border-box;position: relative;">
+                    <div>`+ params[0].axisValue + `：</div>
+                    <div>`+ params[0].data + `人<span style="margin-left:20px;">同比：-7.62%</span></div>
+                    <div style="width: 272px;height: 1px;background:rgb(255 255 255 / 32%);margin: 10px 0;"></div>
+                    <div><span
+                            style="width: 11px;height: 11px;background: `+ params[0].color + `;border-radius: 6px;"></span><span>` + params[0].seriesName + `：
+                        `+ params[0].value + `人</span>
+                    </div>
+                    <div><span
+                            style="width: 11px;height: 11px;background: `+ params[1].color + `;border-radius: 6px;"></span><span>` + params[1].seriesName + `：
+                        `+ params[1].value + `人</span><span style="margin-left:20px;">同比：-7.62%</span>
+                    </div>
+                    <div style="position: absolute;border-right: 20px solid transparent;border-left: 20px solid transparent;
+                    border-top: 20px solid rgb(0 0 0 / 60%);bottom: -30px;left: 20px;"></div>
+                </div>`
+                return html;
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['接待海内外游客', '过夜游客', '旅游总收入', '旅游从业人员'],
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#333',  //更改坐标轴文字颜色
+                    fontSize: 14      //更改坐标轴文字大小
+                }
+            },
+            isTick: {
+                show: true  //坐标轴刻度线
+            },
+            axisLine: { //轴线
+                show: true
+            },
+            splitLine: { //网格线
+                show: true
+            },
+        },
+        yAxis: {
+            type: 'value',
+            min: 0,
+            max: 5000000,
+            interval: 1000000,
+            axisLabel: {
+                formatter: '{value}(个)'
+            },
+            axisTick: {
+                show: true  //坐标轴刻度线
+            },
+            axisLine: { //轴线
+                show: true
+            },
+            splitLine: { //网格线
+                show: true
+            }
+        },
+        series: [
+            {
+                name: '海外游客',
+                data: [1200000, 2000000, 1500000, 800000],
+                type: 'bar',
+                itemStyle: {
+                    color: '#509EF3'
+                }
+            },
+            {
+                name: '海内游客',
+                data: [1300000, 2000002, 1800000, 800000],
+                type: 'bar',
+                barGap: '-100%',//移动第二个柱子的位置实现重叠
+                z: '-1',//改变这根柱子的层级使这根柱子在下面,
+                itemStyle: {
+                    color: '#A7D0FD'
+                }
+
+            }
+        ]
+    };
+    option && myChart.setOption(option);
+</script>
+
+</html>

nngkxxdp/src/main/resources/static/natj/dataCenter/healthCare.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数据中心</title>
+    <link rel="stylesheet" href="css/conmon.css">
+    <link rel="stylesheet" href="css/index.css">
+    <style>
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <div class="menu">
+            <ul class="tabs">
+                <li onclick="window.location.href='socialSecurity.html'">
+                    <img src="images/menu_shbz.png" alt="" style="width: 27px;height: 21px;"
+                        data-name="shbz"><span>社会保障</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li onclick="window.location.href='culturalTourism.html'"><img src="images/menu_whlx.png" alt=""
+                        style="width: 22px;height: 26px;" data-name="whlx"
+                        onclick="window.location.href='culturalTourism.html'"><span>文化旅游</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li class="click"><img src="images/menu_wsylp.png" alt="" style="width: 30px;height: 29px;"
+                        data-name="wsyl"><span>卫生医疗</span>
+                    <div class="arrow"></div>
+                </li>
+                <li onclick="window.location.href='socialAssistance.html'"><img src="images/menu_shjz.png" alt=""
+                        style="width: 31px;height: 27px;" data-name="shjz"><span>社会救助</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+            </ul>
+        </div>
+        <div class="content">
+            <div class="year"><span>年份：</span>
+                <select>
+                    <option value="2021">2021年</option>
+                    <option value="2022">2022年</option>
+                </select>
+            </div>
+            <div class="items div-wsyl">
+                <div class="cont" style="left: 58px;bottom: 146px;">
+                    <div class="detail" style="background: linear-gradient(0deg, #FFFFFF, #E3EDFF);">
+                        <ul class="list">
+                            <li><span>医疗卫生机构数：</span><span>628</span></li>
+                            <li><span>医院:</span><span>46</span></li>
+                            <li><span>卫生院:</span><span>7</span></li>
+                            <li><span>社区卫生服务中心(站):</span><span>46</span></li>
+                            <li><span>疾控中心:</span><span>1</span></li>
+                            <li><span>妇幼保健院:</span><span>1</span></li>
+                            <li><span>医疗卫生机构床位数:</span><span>17208</span></li>
+                            <li><span>医院、卫生院床位数:</span><span>7178</span></li>
+                            <li><span>保健院床位数:</span><span>30</span></li>
+                            <li><span>每干人口医院、卫生院床位数:</span><span>5.66</span></li>
+                        </ul>
+                    </div>
+                    <img src="images/content_tipone.png" alt="">
+                </div>
+                <div class="cont" style="left: 478px;bottom: 154px;">
+                    <div class="detail" style="background: linear-gradient(0deg, #FFFFFF, #FFF2E6);">
+                        <ul class="list">
+                            <li><span>卫生技术人员（人）：</span><span>10856</span></li>
+                            <li><span>执业(助理)医师（人):</span><span>1628</span></li>
+                            <li><span>注册护士(人):</span><span>6589</span></li>
+                            <li><span>每千人口执业(助理):</span><span></span></li>
+                            <li><span>医师(人):</span><span>3036</span></li>
+                            <li><span>每千人口注册护士(人):</span><span>5.19</span></li>
+                        </ul>
+                    </div>
+                    <img src="images/content_tiptwo.png" alt="">
+                </div>
+                <div class="cont" style="left: 894px;bottom: 270px;">
+                    <div class="detail" style="background: linear-gradient(0deg, #FFFFFF, #E6FFF8);">
+                        <ul class="list">
+                            <li><span>总诊疗人次（万人次）：</span><span>622.8</span></li>
+                            <li><span>门急诊人次（人次):</span><span>622.8</span></li>
+                            <li><span>入院人次(万人次)：</span><span>11.3</span></li>
+                            <li><span>出院人次(万人次)：</span><span>11.8</span></li>
+                        </ul>
+                    </div>
+                    <img src="images/content_tipthree.png" alt="">
+                </div>
+                <img src="images/content_bg.png" alt="" class="bg">
+            </div>
+        </div>
+    </div>
+</body>
+<script src="js/jquery-3.5.1.min.js"></script>
+
+</html>

nngkxxdp/src/main/resources/static/natj/dataCenter/socialAssistance.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数据中心</title>
+    <link rel="stylesheet" href="css/conmon.css">
+    <link rel="stylesheet" href="css/index.css">
+    <style>
+        #shjzEchar {
+            width: 1450px;
+            height: 710px;
+            margin-left: -65px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <div class="menu">
+            <ul class="tabs">
+                <li onclick="window.location.href='socialSecurity.html'">
+                    <img src="images/menu_shbz.png" alt="" style="width: 27px;height: 21px;"
+                        data-name="shbz"><span>社会保障</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li onclick="window.location.href='culturalTourism.html'"><img src="images/menu_whlx.png" alt=""
+                        style="width: 22px;height: 26px;" data-name="whlx"><span>文化旅游</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li onclick="window.location.href='healthCare.html'"><img src="images/menu_wsyl.png" alt=""
+                        style="width: 30px;height: 29px;" data-name="wsyl"><span>卫生医疗</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li class="click" onclick="window.location.href='socialAssistance.html'"><img
+                        src="images/menu_shjzp.png" alt="" style="width: 31px;height: 27px;"
+                        data-name="shjz"><span>社会救助</span>
+                    <div class="arrow"></div>
+                </li>
+            </ul>
+        </div>
+        <div class="content">
+            <div class="items div-shjz">
+                <ul class="title">
+                    <li class="list click">最低生活保障数据</li>
+                    <li class="list">特困人员救助供养数据</li>
+                    <li class="list">临时救助数据</li>
+                </ul>
+                <div id="shjzEchar"></div>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="js/jquery-3.5.1.min.js"></script>
+<script src="js/echarts.min.js"></script>
+<script>
+    //社会救助菜单导航
+    $('.div-shjz .title').on('click', 'li', function () {
+        var tapsTitleLi = $('.div-shjz .title li');
+        tapsTitleLi.removeClass('click');
+        $(this).addClass('click');
+    })
+</script>
+<script>
+    //社会救助统计图
+    var chartDom = document.getElementById('shjzEchar');
+    var myChart = echarts.init(chartDom);
+    var option;
+    option = {
+        grid: {
+            // 网格线配置
+            show: true,
+            lineStyle: {
+                color: ["#e9e9e9"],
+                width: 1,
+                type: "solid",
+            },
+        },
+        legend: [{
+            left: '20%',
+            orient: 'vertical',
+            data: ['最低生活保障人数(人)', '发放低保金(万元)']
+        },
+        {
+            left: '40%',
+            orient: 'vertical',
+            data: ['城市居民最低生活保障人数(人)', '城市居民发放低保金(万元)']
+        }, {
+            left: '60%',
+            orient: 'vertical',
+            data: ['农村居民最低生活保障（人)', '农村居民最发放低保金(万元)']
+        }
+        ],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor: "rgb(0 0 0 / 40%)",
+            borderColor: 'transparent',
+            textStyle: {
+                color: '#fff'
+            },
+
+        },
+        dataset: {
+            source: [
+                ['product', '最低生活保障人数(人)', '发放低保金(万元)', '城市居民最低生活保障人数(人)', '城市居民发放低保金(万元)', '农村居民最低生活保障（人)', '农村居民最发放低保金(万元)'],
+                ['2015', 2000, 50, 7000, 32, 767, 90],
+                ['2016', 2000, 50, 7000, 32, 767, 90],
+                ['2017', 2000, 50, 7000, 32, 767, 90],
+                ['2018', 2000, 50, 7000, 32, 767, 90],
+                ['2019', 2000, 50, 7000, 32, 767, 90],
+                ['2020', 2000, 50, 7000, 32, 767, 90],
+                ['2021', 2000, 50, 7000, 32, 767, 90]
+            ]
+        },
+        xAxis: {
+            type: 'category',
+            axisTick: {
+                show: true  //坐标轴刻度线
+            },
+            axisLine: { //轴线
+                show: true
+            },
+            splitLine: { //网格线
+                show: true
+            },
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#333',  //更改坐标轴文字颜色
+                    fontSize: 14      //更改坐标轴文字大小
+                }
+            }
+        },
+        yAxis: [{
+            type: 'value',
+            min: 0,
+            max: 15000,
+            interval: 3000,
+            axisLabel: {
+                formatter: '{value}(人)'
+            },
+            axisTick: {
+                show: true  //坐标轴刻度线
+            },
+            axisLine: { //轴线
+                show: true
+            },
+            splitLine: { //网格线
+                show: true
+            }
+        },
+        {
+            type: 'value',
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+                formatter: '{value}(万元)'
+            }
+        }],
+        series: [{
+            type: 'bar',
+            itemStyle: {
+                color: '#3C8DE6'
+            }
+        },
+        {
+            yAxisIndex: 1,
+            type: 'bar',
+            itemStyle: {
+                color: '#FAA639'
+            }
+        },
+        {
+            type: 'bar',
+            itemStyle: {
+                color: '#8EC051'
+            }
+        },
+        {
+            type: 'bar',
+            yAxisIndex: 1,
+            itemStyle: {
+                color: '#27C2C1'
+            }
+        },
+        {
+            type: 'bar',
+            itemStyle: {
+                color: '#4DC4E7'
+            }
+        },
+        {
+            type: 'bar',
+            yAxisIndex: 1,
+            itemStyle: {
+                color: '#FA8A46'
+            }
+        },
+        ]
+    };
+    option && myChart.setOption(option);
+</script>
+
+</html>

nngkxxdp/src/main/resources/static/natj/dataCenter/socialSecurity.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数据中心</title>
+    <link rel="stylesheet" href="css/conmon.css">
+    <link rel="stylesheet" href="css/index.css">
+    <style>
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <div class="menu">
+            <ul class="tabs">
+                <li class="click" onclick="window.location.href='socialSecurity.html'">
+                    <img src="images/menu_shbzp.png" alt="" style="width: 27px;height: 21px;"
+                        data-name="shbz"><span>社会保障</span>
+                    <div class="arrow"></div>
+                </li>
+                <li onclick="window.location.href='culturalTourism.html'"><img src="images/menu_whlx.png" alt=""
+                        style="width: 22px;height: 26px;" data-name="whlx"><span>文化旅游</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li onclick="window.location.href='healthCare.html'"><img src="images/menu_wsyl.png" alt=""
+                        style="width: 30px;height: 29px;" data-name="wsyl"><span>卫生医疗</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+                <li onclick="window.location.href='socialAssistance.html'"><img src="images/menu_shjz.png" alt=""
+                        style="width: 31px;height: 27px;" data-name="shjz"><span>社会救助</span>
+                    <div class="arrow" style="visibility: hidden;"></div>
+                </li>
+            </ul>
+        </div>
+        <div class="content">
+            <div class="year"><span>年份：</span>
+                <select>
+                    <option value="2021">2021年</option>
+                    <option value="2022">2022年</option>
+                </select>
+            </div>
+            <div class="items div-shbz">
+                <ul class="itemData">
+                    <li>
+                        <img src="images/content_icon_one.png" alt="">
+                        <div class="right">
+                            <div>城镇新增就业人数</div>
+                            <div class="bottom">
+                                <div class="number">3.74</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">0.76</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">-</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">3486</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">8330</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">1.84</div>
+                                <div class="unit">万人</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+                <div class="shbzTable">
+                    <div style="text-align: center;width:100%;font-size: 22px;color: #333333;margin: 20px auto;">劳动争议案件
+                    </div>
+                    <ul class="title">
+                        <li style="width: 200px;">年份</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;">2021</li>
+                        <li>4259</li>
+                        <li>4270</li>
+                        <li>4012</li>
+                        <li>386</li>
+                        <li>97</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="js/jquery-3.5.1.min.js"></script>
+<script>
+    var jsonData = {
+        "socialSecurity": [{
+            "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",
+            "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').on('change', function () {
+        var value = $(".year").val();
+        switch (value) {
+
+        }
+        var data = jsonData;
+        console.log(data)
+    })
+</script>
+
+</html>

nngkxxdp/src/main/resources/static/natj/dataCenter/详情.txt

@@ -0,0 +1,4 @@
+社会保障：socialSecurity.html
+文化文旅：culturalTourism.html
+卫生医疗：healthCare.html
+社会救助：socialAssistance.html

nngkxxdp/src/main/resources/static/natj/enter_dataAll.html

@@ -96,12 +96,19 @@
 				display: block;
 			}
 
+			.floatingButton{
+				width: 300px;
+				height: 300px;
+				border: #333;
+				
+			}
+
 		</style>
 	</head>
 	<body style="background-color: #fff;">
 		<div class="bodyBox">
 <!--			国民经济-->
-			<div class="box" onclick="goGmjj">
+			<div class="box" onclick="goGmjj()">
 				<div style="width: 150px;height: 100%;float: left; ">
 					<img class="moduleIcon img1" src="./image/content_icon_financing_default.png">
 					<img class="moduleIcon img2" src="./image/content_icon_financing_hover.png">
@@ -117,7 +124,7 @@
 				</div>
 			</div>
 			<!--			政务服务-->
-			<div class="box" onclick="goZwfw">
+			<div class="box" onclick="goZwfw()">
 				<div style="width: 150px;height: 100%;float: left; ">
 					<img class="moduleIcon img1" src="./image/content_icon_hands_default.png">
 					<img class="moduleIcon img2" src="./image/content_icon_hands_hover.png">
@@ -133,7 +140,7 @@
 				</div>
 			</div>
 			<!--			公开信箱-->
-			<div class="box" onclick="goGkyx">
+			<div class="box" onclick="goGkyx()">
 				<div style="width: 150px;height: 100%;float: left; ">
 					<img class="moduleIcon img1" src="./image/content_icon_mail_default.png">
 					<img class="moduleIcon img2" src="./image/content_icon_mail_hover.png">
@@ -149,7 +156,7 @@
 				</div>
 			</div>
 			<!--			社会保障-->
-			<div class="box">
+			<div class="box" onclick="goShbz()">
 				<div style="width: 150px;height: 100%;float: left; ">
 					<img class="moduleIcon img1" src="./image/content_icon_protect_default.png">
 					<img class="moduleIcon img2" src="./image/content_icon_protect_hover.png">
@@ -165,7 +172,7 @@
 				</div>
 			</div>
 			<!--			卫生医疗-->
-			<div class="box">
+			<div class="box" onclick="goWsyl()">
 				<div style="width: 150px;height: 100%;float: left; ">
 					<img class="moduleIcon img1" src="./image/content_icon_love_default.png">
 					<img class="moduleIcon img2" src="./image/content_icon_love_hover.png">
@@ -181,7 +188,7 @@
 				</div>
 			</div>
 			<!--			文化旅游-->
-			<div class="box">
+			<div class="box" onclick="goWhly()">
 				<div style="width: 150px;height: 100%;float: left;">
 					<img class="moduleIcon img1" src="./image/content_icon_takeoff_default.png">
 					<img class="moduleIcon img2" src="./image/content_icon_takeoff_hover.png">
@@ -197,7 +204,7 @@
 				</div>
 			</div>
 			<!--			社会救助-->
-			<div class="box">
+			<div class="box" onclick="goShjz()">
 				<div style="width: 150px;height: 100% ;float: left;">
 					<img class="moduleIcon img1" src="./image/content_icon_sport_default.png">
 					<img class="moduleIcon img2" src="./image/content_icon_sport_hover.png">
@@ -213,11 +220,13 @@
 				</div>
 			</div>
 <!--			重庆市公共数据开发平台-->
-			<div></div>
+			<div class="floatingButton">公共数据平台</div>
 		</div>
 	</body>
 	<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
 	<script type="text/javascript">
+		let PATH = "https://data.cqna.gov.cn/natj"
+		// let PATH = "http://localhost:7777/natj"
 		function goGmjj(){
 			window.open("https://www.cqna.gov.cn/bm/qtjj/gmjjtj/")
 		}
@@ -227,5 +236,18 @@
 		function goGkyx(){
 			window.open("https://www.cqna.gov.cn/hdjl_254/gkxxtjsj/")
 		}
+
+		function goShbz(){
+			window.open(PATH+"/dataCenter/socialSecurity.html")
+		}
+		function goWsyl(){
+			window.open(PATH+"/dataCenter/healthCare.html")
+		}
+		function goWhly(){
+			window.open(PATH+"/dataCenter/culturalTourism.html")
+		}
+		function goShjz(){
+			window.open(PATH+"/dataCenter/socialAssistance.html")
+		}
 	</script>
 </html>