首页进行样式调整

rwk-admin/src/main/resources/static/css/main.css

@@ -55,15 +55,17 @@ body, html {
     color: #000000;
     background-color: #F7F7F7;
     padding: 5px 10px 5px 10px;
+    border: 1px solid #E2E2E2;
 }
 .cut:first-child{
-    border-radius: 5px 0 0 5px;
+    border-radius: 8px 0 0 8px;
 }
 .cut:last-child{
-    border-radius: 0 5px 5px 0;
+    border-radius: 0 8px 8px 0;
 }
 .cut.active{
     color: #ffffff;
+    border: 2px solid #1a7bb9;
     background-color: #1a7bb9;
 }
 .tabs-container{

rwk-admin/src/main/resources/templates/main.html

@@ -19,13 +19,13 @@
             <div class="wddbrw_head">
                 <h1>知联会职务</h1>
             </div>
-            <div class="box" style="height: calc(50% - 50px);">
+            <div class="box" style="height: calc(50% - 60px);">
                 <div id="pieChart1" style="width: 100%; height: 100%;"></div>
             </div>
-            <div class="wddbrw_head">
+            <div class="wddbrw_head" style="margin-top: 20px;margin-bottom: 10px;">
                 <h1>政治面貌情况</h1>
             </div>
-            <div class="box" style="height: calc(50% - 50px);display: flex;margin: 0 10px;">
+            <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>
@@ -33,28 +33,28 @@
         <div style="width: 40%;">
              <div style="width:100%;display: flex;">
                  <div class="arrange div1">
-                     <div>知联会干部在库数</div>
-                     <span>5321</span>
+                     <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>
-                         <span><span style="margin-right: 20px;color: #FF620D;">1</span>人</span>
+                         <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>
-                         <span><span style="margin-right: 20px;color: #016BFF;">5</span>人</span>
+                         <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: 10px">
+            <div class="wddbrw_head" style="margin-top: 20px;margin-bottom: 10px;">
                 <h1>近期培训活动</h1>
             </div>
-            <div class="box" style="height: calc(82% - 76px);display: flex;margin: 0px 10px;">
+            <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%">
@@ -149,114 +149,125 @@
         //        console.log(result);
         //     }
         // });
-    }
-    var array1 = [
-        {name:'数据1',value:235},
-        {name:'数据2',value:274},
-        {name:'数据3',value:310},
-        {name:'数据4',value:335}
-    ];
-    var grid = {left: '10%', right: '6%', bottom: '3%', top:'6%'}
-    //饼图1
-    pieChartMethod('pieChart1',array1,"职务层次情况",'60%',"",grid,"",true);
-    //饼图2
-    pieChartMethod('pieChart2',array1,"饼图2",['50%', '80%'],"",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: ['30岁以下', '31-40岁', '41-50岁', '51-60岁', '61岁以上'],
-        axisLine: {
-            show: false,
-        },
-        axisTick: {
-            show: false,
-        }
-    };
-    var series = [{
+        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: [1200, 900, 600, 300, 200],
+            data: [123, 76, 66, 21],
             emphasis: {
                 focus: 'series'
+            },
+            label: {
+                show: true,
+                position: 'right'
             }
         }, {
             name: '女',
             type: 'bar',
-            data: [1100, 950, 650, 350, 250],
+            data: [95, 91, 73, 29],
             emphasis: {
                 focus: 'series'
+            }, label: {
+                show: true,
+                position: 'right'
             }
-        }
-    ]
-    //柱状图1
-    var grid1 = {left: '15%', right: '6%', bottom: '12%', top:'12%'};
-    barChartMethod("barChart1",{trigger: 'axis'},{data: ['男', '女'],left: '3%',},{type: 'value', name: '人数',
-        axisLine: {show: false,}, axisTick: {show: false,},splitLine: {show: false}},yAxis,grid1,series);
-    grid1.top = '3%';
-    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];
+        }]
+        //柱状图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,}
         }
-    }];
-    yAxis = {
-        type: 'category',
-        data: ['研究生', '大学', '大专', '中专', '职高','中央党校研究生','中央党校大学','其他']
-    }
-    //柱状图2
-    barChartMethod("barChart2",{trigger: 'axis'},"",{type: 'value', name: '人数'},yAxis,grid1,series);
-    var itemStyle = {borderColor: '#fff',borderWidth: 2}
-    //饼图3
-    pieChartMethod('pieChart3',array1,"饼图3",'60%',"",grid,"",true,itemStyle);
-    //柱状图3
-    var data1 = [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70];
-    var maxHeight = Math.max(...data1);
-    var xAxis = {
-        type: 'category',
-            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
-    }
-    yAxis = {
-        type: 'value'
-    }
-    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' // 实际数据的颜色
+        //柱状图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 grid3 = {left: '5%', right: '6%', bottom: '12%', top:'6%'}
-    barChartMethod("barChart3","","",xAxis,yAxis,grid3,series1);
+        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){
@@ -271,7 +282,7 @@
                 type: 'pie',
                 data: array,
                 labelLine: {
-                    length: 4,
+                    length: 8,
                     length2: 4
                 },
                 emphasis: {