From a2d6736bd1bf2767e835740eda8767edb0ad66c3 Mon Sep 17 00:00:00 2001
From: dshclm <3321914460@qq.com>
Date: Wed, 9 Oct 2024 11:05:05 +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/system/examnum/countExam.html   | 110 +++----
 .../templates/system/trainnum/trainnum.html   | 277 +++++++++++-------
 2 files changed, 234 insertions(+), 153 deletions(-)

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 13d0f76..722b351 100644
--- a/ruoyi-admin/src/main/resources/templates/system/examnum/countExam.html
+++ b/ruoyi-admin/src/main/resources/templates/system/examnum/countExam.html
@@ -11,30 +11,31 @@
         margin: 0 auto;
     }
     .count_top{
-        width: 100%;
-        height: 18%;
+        width: 27%;
+        height: 100%;
     }
     .count_center{
         width: 100%;
-        height: 40%;
+        height: 50%;
         background-color: white;
         border-radius: 10px;
         display: flex;
         justify-content: space-between;
         overflow: hidden;
+        margin-top: 10px;
     }
     .count_top ul{
         width: 100%;
         height: 100%;
         list-style: none;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
         padding: 0;
+        flex-direction: column;
+        justify-content: space-around;
     }
     .count_top ul li{
-        width: 333px;
-        height: 120px;
+        width: 289px;
+        height: 110px;
         background-color: white;
         border-radius: 10px;
         box-shadow: -4px 4px 4px #d5d5d5;
@@ -42,8 +43,8 @@
         overflow: hidden;
     }
     .yuan{
-        width: 300px;
-        height: 300px;
+        width: 266px;
+        height: 266px;
         display: inline-block;
         position: absolute;
         bottom: -163px;
@@ -62,8 +63,8 @@
     .count_top ul li i{
         font-size: 33px;
         position: absolute;
-        top: 72%;
-        left: 82%;
+        top: 66%;
+        left: 85%;
         transform: translate(-50%,-50%);
     }
     .count_top ul li .textList{
@@ -85,9 +86,10 @@
     }
     .count_bottom{
         width: 100%;
-        height: 46%;
+        height: 50%;
         background-color: white;
         border-radius: 10px;
+        margin-top: 10px;
     }
     .children_echarts{
         width: 33%;
@@ -100,51 +102,51 @@
     <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 id="leftMain" style="width: 500px;height:380px"></div>
             </div>
             <div class="children_echarts center_echarts" style="width: 50%">
-                <div id="centerMain" style="width: 650px;height:310px"></div>
+                <div id="centerMain" style="width: 500px;height:380px"></div>
+            </div>
+            <div class="count_top">
+                <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.tg}}
+                            </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.wtg}}
+                            </p>
+                            <p>
+                                未通过人数
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-pie-chart" style="color: #12b975"></i>
+                    </li>
+                </ul>
             </div>
-        </div>
-        <div class="count_top">
-            <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.tg}}
-                        </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.wtg}}
-                        </p>
-                        <p>
-                            未通过人数
-                        </p>
-                    </div>
-                    <span class="yuan"></span>
-                    <i class="fa fa-pie-chart" style="color: #12b975"></i>
-                </li>
-            </ul>
         </div>
         <div class="count_bottom">
             <el-table
diff --git a/ruoyi-admin/src/main/resources/templates/system/trainnum/trainnum.html b/ruoyi-admin/src/main/resources/templates/system/trainnum/trainnum.html
index 1d3a9d3..5f4ffd7 100644
--- a/ruoyi-admin/src/main/resources/templates/system/trainnum/trainnum.html
+++ b/ruoyi-admin/src/main/resources/templates/system/trainnum/trainnum.html
@@ -11,20 +11,23 @@
     }
     .count_top{
         width: 100%;
-        height: 30%;
+        height: 50%;
+        display: flex;
+        justify-content: space-between;
     }
     .count_top ul{
-        width: 100%;
+        width: 36%;
         height: 100%;
         list-style: none;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0;
+        flex-wrap: wrap;
     }
     .count_top ul li{
-        width: 289px;
-        height: 168px;
+        width: 231px;
+        height: 181px;
         background-color: white;
         border-radius: 10px;
         box-shadow: -4px 4px 4px #d5d5d5;
@@ -56,7 +59,7 @@
         font-size: 33px;
         position: absolute;
         top: 72%;
-        left: 82%;
+        left: 74%;
         transform: translate(-50%,-50%);
     }
     .count_top ul li .textList{
@@ -65,6 +68,7 @@
         height: 117px;
         top: 18%;
         left: 13px;
+        z-index: 99;
     }
     .textList p{
         color: rgba(85, 90, 105, 0.79);
@@ -78,112 +82,121 @@
     }
     .count_bottom{
         width: 100%;
-        height: 70%;
+        height: 55%;
         border-radius: 10px;
     }
+    .children_echarts{
+        width: 33%;
+        height: 100%;
+    }
 </style>
 <body class="gray-bg">
 <div class="container-div" id="app">
-    <div class="row">
-        <div class="count_box">
-            <div class="count_top">
-                <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="count_box">
+        <div class="count_top">
+            <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="leftMain" style="width: 430px;height:380px"></div>
+            </div>
+            <div class="children_echarts center_echarts">
+                <div id="centerMain" style="width: 430px;height:380px"></div>
             </div>
-            <div class="count_bottom">
-                <div class="col-sm-12 search-collapse" style="margin-top: 0">
-                    <form id="formId">
-                        <div class="select-list">
-                            <ul>
-                                <li>
-                                    <label>人员名称：</label>
-                                    <input type="text" name="trainName"/>
-                                </li>
-                                <li>
-                                    <label>所属地市：</label>
-                                    <input type="text" name="AREAID"/>
-                                </li>
-                                <li>
-                                    <label>培训日期：</label>
-                                    <input type="text" class="time-input" placeholder="请选择培训日期" name="trainDate"/>
-                                </li>
+        </div>
+        <div class="count_bottom">
+            <div class="col-sm-12 search-collapse" style="margin-top: 0">
+                <form id="formId">
+                    <div class="select-list">
+                        <ul>
+                            <li>
+                                <label>人员名称：</label>
+                                <input type="text" name="trainName"/>
+                            </li>
+                            <li>
+                                <label>所属地市：</label>
+                                <input type="text" name="AREAID"/>
+                            </li>
+                            <li>
+                                <label>培训日期：</label>
+                                <input type="text" class="time-input" placeholder="请选择培训日期" name="trainDate"/>
+                            </li>
 
-                                <li>
-                                    <label>培训状态：</label>
-                                    <select name="trainState" th:with="type=${@dict.getType('sys_examine_state')}">
-                                        <option value="">所有</option>
-                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
-                                    </select>
-                                </li>
-                                <li>
-                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
-                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </form>
-                </div>
-                <div class="btn-group-sm" id="toolbar" role="group">
-                    <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:trainnum:export">
-                        <i class="fa fa-download"></i> 导出
-                    </a>
-                </div>
-                <div class="col-sm-12 select-table table-striped" style="min-height: 80%;">
-                    <table id="bootstrap-table"></table>
-                </div>
+                            <li>
+                                <label>培训状态：</label>
+                                <select name="trainState" th:with="type=${@dict.getType('sys_examine_state')}">
+                                    <option value="">所有</option>
+                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
+                                </select>
+                            </li>
+                            <li>
+                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+                            </li>
+                        </ul>
+                    </div>
+                </form>
+            </div>
+            <div class="btn-group-sm" id="toolbar" role="group">
+                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:trainnum:export">
+                    <i class="fa fa-download"></i> 导出
+                </a>
+            </div>
+            <div class="col-sm-12 select-table table-striped" style="min-height: 80%;">
+                <table id="bootstrap-table"></table>
             </div>
         </div>
     </div>
 </div>
 <th:block th:include="include :: footer" />
+<th:block th:include="include :: echarts-js" />
 <script th:inline="javascript">
     var detailFlag = [[${@permission.hasPermi('system:trainnum:detail')}]];
     var listFlag = [[${@permission.hasPermi('system:trainnum:list')}]];
@@ -314,6 +327,72 @@
             }
         }
     })
+    var myChart = echarts.init(document.getElementById('leftMain'));
+    axios.post(prefix + '/countTrainMonth').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: '#f3bc67'
+                        }
+                    }
+                ]
+            });
+        }
+    })
+    var centerMain = echarts.init(document.getElementById('centerMain'));
+    axios.post(prefix + '/countTrainNoMonth').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: '#b546ff'
+                        }
+                    }
+                ]
+            });
+        }
+    })
 </script>
 </body>
 </html>