From d0a63035718d5678b88eb418dc3fccbd53836b8d Mon Sep 17 00:00:00 2001
From: dshclm <3321914460@qq.com>
Date: Mon, 21 Oct 2024 09:21:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/monitor/backup/backup.html      |   2 +-
 .../templates/system/examnum/countExam.html   | 253 ++++++++++++++----
 .../templates/system/examnum/examList.html    |  90 +++++++
 3 files changed, 298 insertions(+), 47 deletions(-)
 create mode 100644 ruoyi-admin/src/main/resources/templates/system/examnum/examList.html

diff --git a/ruoyi-admin/src/main/resources/templates/monitor/backup/backup.html b/ruoyi-admin/src/main/resources/templates/monitor/backup/backup.html
index d72cce1..68449c3 100644
--- a/ruoyi-admin/src/main/resources/templates/monitor/backup/backup.html
+++ b/ruoyi-admin/src/main/resources/templates/monitor/backup/backup.html
@@ -40,7 +40,7 @@
     <div class="content">
         <div class="row" style="height: 100%;">
             <div class="login-form">
-                <h2 style="font-weight: bold">数据库备份</h2>
+                <h2 style="font-weight: bold">数据备份</h2>
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                     <el-form-item label="数据库账号" prop="username">
                         <el-input v-model="ruleForm.username"></el-input>
diff --git a/ruoyi-admin/src/main/resources/templates/system/examnum/countExam.html b/ruoyi-admin/src/main/resources/templates/system/examnum/countExam.html
index 699298a..7c217d2 100644
--- a/ruoyi-admin/src/main/resources/templates/system/examnum/countExam.html
+++ b/ruoyi-admin/src/main/resources/templates/system/examnum/countExam.html
@@ -90,6 +90,73 @@
         background-color: white;
         border-radius: 10px;
         margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+    }
+    .count_bottom ul{
+        width: 36%;
+        height: 100%;
+        list-style: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0;
+        flex-wrap: wrap;
+    }
+    .count_bottom ul li{
+        width: 231px;
+        height: 181px;
+        background-color: white;
+        border-radius: 10px;
+        box-shadow: -4px 4px 4px #d5d5d5;
+        position: relative;
+        overflow: hidden;
+    }
+    .yuan{
+        width: 300px;
+        height: 300px;
+        display: inline-block;
+        position: absolute;
+        bottom: -163px;
+        right: -146px;
+        border-radius: 50%;
+    }
+    .count_bottom ul li:nth-child(1) .yuan{
+        background-color: #e2f0ff;
+    }
+    .count_bottom ul li:nth-child(2) .yuan{
+        background-color: #ffe7e9;
+    }
+    .count_bottom ul li:nth-child(3) .yuan{
+        background-color: #e3f7ef;
+    }
+    .count_bottom ul li:nth-child(4) .yuan{
+        background-color: #f3f7e3;
+    }
+    .count_bottom ul li i{
+        font-size: 33px;
+        position: absolute;
+        top: 72%;
+        left: 74%;
+        transform: translate(-50%,-50%);
+    }
+    .count_bottom ul li .textList{
+        position: absolute;
+        width: 80%;
+        height: 117px;
+        top: 18%;
+        left: 13px;
+        z-index: 99;
+    }
+    .textList p{
+        color: rgba(85, 90, 105, 0.79);
+    }
+    .textList p:nth-of-type(1) {
+        font-size: 33px;
+    }
+
+    .textList p:nth-of-type(2) {
+        font-size: 24px;
     }
     .children_echarts{
         width: 33%;
@@ -101,6 +168,64 @@
 <div class="container-div" id="app">
     <div class="row">
         <div class="count_box">
+            <div class="count_bottom">
+                <ul>
+                    <li>
+                        <div class="textList">
+                            <p>
+                                {{countList.total}}
+                            </p>
+                            <p>
+                                培训次数
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-clipboard" style="color: #0078ff"></i>
+                    </li>
+                    <li>
+                        <div class="textList">
+                            <p>
+                                {{countList.shtg}}
+                            </p>
+                            <p>
+                                审核通过
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-newspaper-o" style="color: #ff313c"></i>
+                    </li>
+                    <li>
+                        <div class="textList">
+                            <p>
+                                {{countList.shwtg}}
+                            </p>
+                            <p>
+                                审核未通过
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-pie-chart" style="color: #12b975"></i>
+                    </li>
+                    <li>
+                        <div class="textList">
+                            <p>
+                                {{countList.dsh}}
+                            </p>
+                            <p>
+                                待审核
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-hourglass-2" style="color: #12b975"></i>
+                    </li>
+                </ul>
+                <div class="children_echarts left_echarts" style="margin-left: 17px;">
+                    <div id="leftTrainMain" style="width: 550px;height:380px"></div>
+                </div>
+                <div class="children_echarts center_echarts">
+                    <div id="centerTrainMain" style="width: 530px;height:380px"></div>
+                </div>
+            </div>
             <div class="count_center">
                 <div class="children_echarts left_echarts" style="width: 50%">
                     <div id="leftMain" style="width: 600px;height:380px"></div>
@@ -110,7 +235,7 @@
                 </div>
                 <div class="count_top">
                     <ul>
-                        <li>
+                        <li class="method">
                             <div class="textList">
                                 <p>
                                     {{countList.total}}
@@ -122,7 +247,7 @@
                             <span class="yuan"></span>
                             <i class="fa fa-clipboard" style="color: #0078ff"></i>
                         </li>
-                        <li>
+                        <li class="method">
                             <div class="textList">
                                 <p>
                                     {{countList.tg}}
@@ -134,7 +259,7 @@
                             <span class="yuan"></span>
                             <i class="fa fa-newspaper-o" style="color: #ff313c"></i>
                         </li>
-                        <li>
+                        <li class="method">
                             <div class="textList">
                                 <p>
                                     {{countList.wtg}}
@@ -149,41 +274,6 @@
                     </ul>
                 </div>
             </div>
-            <div class="count_bottom">
-                <el-table
-                        :data="tableData"
-                        style="width: 100%;border-radius: 10px;"
-                        max-height="520"
-                >
-                    <el-table-column
-                            prop="title"
-                            label="考试名称"
-                            align="center"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                            prop="total"
-                            label="考试总数"
-                            align="center"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                            prop="tg"
-                            label="通过人数"
-                            align="center">
-                    </el-table-column>
-                    <el-table-column
-                            prop="wtg"
-                            label="未通过人数"
-                            align="center">
-                    </el-table-column>
-                    <el-table-column label="操作" align="center">
-                        <template slot-scope="scope">
-                            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
         </div>
     </div>
 
@@ -193,11 +283,11 @@
 <th:block th:include="include :: echarts-js" />
 <script th:inline="javascript">
     var prefix = ctx + "system/examnum";
+    var trainPrefix = ctx + "system/trainnum";
     var app = new Vue({
         el: '#app',
         data: {
             countList:[],
-            tableData: [],
         },
         created(){
             this.init()
@@ -207,16 +297,20 @@
                 axios.post(prefix + '/countList').then(response => {
                     this.countList = response.data.data
                 })
-                axios.post(prefix + '/countExamList').then(response => {
-                    this.tableData = response.data.data
+                axios.post(trainPrefix + '/countList').then(response => {
+                    console.log(response)
+                    this.countList = response.data.data
                 })
             },
-            handleEdit(index,row){
-                var url = prefix + '/examnum/' + row.examId
-                $.modal.openTab("考试明细", url);
-            }
         }
-    })
+    });
+    var listItems = document.querySelectorAll('.method');
+    for (var i = 0; i < listItems.length; i++) {
+        listItems[i].addEventListener('click', function() {
+            var url = prefix + '/examList'
+            $.modal.openTab("考试明细", url);
+        });
+    }
     var myChart = echarts.init(document.getElementById('leftMain'));
     axios.post(prefix + '/countExamMonth').then(response => {
         if (response.data.code == web_status.SUCCESS){
@@ -283,6 +377,73 @@
             });
         }
     })
+
+    var myTrainChart = echarts.init(document.getElementById('leftTrainMain'));
+    axios.post(trainPrefix + '/countTrainMonth').then(response => {
+        if (response.data.code == web_status.SUCCESS){
+            myTrainChart.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: '#f3bc67'
+                        }
+                    }
+                ]
+            });
+        }
+    })
+    var centerTrainMain = echarts.init(document.getElementById('centerTrainMain'));
+    axios.post(trainPrefix + '/countTrainNoMonth').then(response => {
+        if (response.data.code == web_status.SUCCESS){
+            centerTrainMain.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: '#b546ff'
+                        }
+                    }
+                ]
+            });
+        }
+    })
 </script>
 </body>
 </html>
diff --git a/ruoyi-admin/src/main/resources/templates/system/examnum/examList.html b/ruoyi-admin/src/main/resources/templates/system/examnum/examList.html
new file mode 100644
index 0000000..ce376ec
--- /dev/null
+++ b/ruoyi-admin/src/main/resources/templates/system/examnum/examList.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+    <th:block th:include="include :: header('考试统计')" />
+    <th:block th:include="include :: element-css" />
+</head>
+<style>
+    .count_box{
+        height: 97%;
+    }
+    .count_bottom{
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        border-radius: 10px;
+        margin-top: 10px;
+        overflow: auto;
+    }
+</style>
+<body class="gray-bg">
+<div class="container-div" id="app">
+    <div class="row">
+        <div class="count_box">
+            <div class="count_bottom">
+                <el-table
+                        :data="tableData"
+                        style="width: 100%;border-radius: 10px;"
+                        max-height="520"
+                >
+                    <el-table-column
+                            prop="title"
+                            label="考试名称"
+                            align="center"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                            prop="total"
+                            label="考试总数"
+                            align="center"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                            prop="tg"
+                            label="通过人数"
+                            align="center">
+                    </el-table-column>
+                    <el-table-column
+                            prop="wtg"
+                            label="未通过人数"
+                            align="center">
+                    </el-table-column>
+                    <el-table-column label="操作" align="center">
+                        <template slot-scope="scope">
+                            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+
+</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({
+        el: '#app',
+        data: {
+            tableData: [],
+        },
+        created(){
+            this.init()
+        },
+        methods:{
+            init(){
+                axios.post(prefix + '/countExamList').then(response => {
+                    this.tableData = response.data.data
+                })
+            },
+            handleEdit(index,row){
+                var url = prefix + '/examnum/' + row.examId
+                $.modal.openTab("考试明细", url);
+            }
+        }
+    })
+</script>
+</body>
+</html>