提交修改

6 months ago · 9ef3a6df5e
parent 9e7aa8a447
commit 9ef3a6df5e
1 changed files with 92 additions and 2 deletions
--- a/ruoyi-admin/src/main/resources/templates/system/examnum/countExam.html
+++ b/ruoyi-admin/src/main/resources/templates/system/examnum/countExam.html
@ -12,7 +12,16 @@
    }
    .count_top{
        width: 100%;
-        height: 30%;
+        height: 25%;
+    }
+    .count_center{
+        width: 100%;
+        height: 40%;
+        background-color: white;
+        border-radius: 10px;
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
    }
    .count_top ul{
        width: 100%;
@ -76,14 +85,28 @@
    }
    .count_bottom{
        width: 100%;
-        height: 70%;
+        height: 38%;
        background-color: white;
        border-radius: 10px;
+        margin-top: 10px;
+    }
+    .children_echarts{
+        width: 33%;
+        height: 100%;
+
    }
 </style>
 <body class="gray-bg">
 <div class="container-div" id="app">
    <div class="count_box">
+        <div class="count_center">
+            <div class="children_echarts left_echarts" style="width: 50%">
+                <div id="leftMain" style="width: 650px;height:310px"></div>
+            </div>
+            <div class="children_echarts center_echarts" style="width: 50%">
+                <div id="centerMain" style="width: 650px;height:310px"></div>
+            </div>
+        </div>
        <div class="count_top">
            <ul>
                <li>
@ -163,6 +186,7 @@
 </div>
 <th:block th:include="include :: footer" />
 <th:block th:include="include :: element-js" />
+<th:block th:include="include :: echarts-js" />
 <script th:inline="javascript">
    var prefix = ctx + "system/examnum";
    var app = new Vue({
@ -189,6 +213,72 @@
            }
        }
    })
+    var myChart = echarts.init(document.getElementById('leftMain'));
+    axios.post(prefix + '/countExamMonth').then(response => {
+        if (response.data.code == web_status.SUCCESS){
+            myChart.setOption({
+                title: {
+                    text: '通过人数'
+                },
+                tooltip: {},
+                legend: {
+                    data:['数量']
+                },
+                xAxis: {
+                    data: response.data.data.xAxisData,
+                    axisLabel: {
+                        rotate: 45, // 旋转标签的角度
+                        margin: 10, // 标签与坐标轴的间距
+                    },
+                },
+                yAxis: {
+                },
+                series: [
+                    {
+                        name: '数量',
+                        type: 'bar',
+                        data: response.data.data.yAxisData,
+                        itemStyle: {
+                            color: '#34ff73'
+                        }
+                    }
+                ]
+            });
+        }
+    })
+    var centerMain = echarts.init(document.getElementById('centerMain'));
+    axios.post(prefix + '/countExamNoPass').then(response => {
+        if (response.data.code == web_status.SUCCESS){
+            centerMain.setOption({
+                title: {
+                    text: '未通过人数'
+                },
+                tooltip: {},
+                legend: {
+                    data:['数量']
+                },
+                xAxis: {
+                    data: response.data.data.xAxisData,
+                    axisLabel: {
+                        rotate: 45, // 旋转标签的角度
+                        margin: 10, // 标签与坐标轴的间距
+                    },
+                },
+                yAxis: {
+                },
+                series: [
+                    {
+                        name: '数量',
+                        type: 'bar',
+                        data: response.data.data.yAxisData,
+                        itemStyle: {
+                            color: '#ff4a95'
+                        }
+                    }
+                ]
+            });
+        }
+    })
 </script>
 </body>
 </html>