From aa84c31ae42b4ad7c8041d045da3b6311e206a8c Mon Sep 17 00:00:00 2001
From: dshclm <3321914460@qq.com>
Date: Fri, 9 Aug 2024 09:48:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=89=E5=AF=86=E7=BD=91=E7=BB=9C=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/check/checknum/checknum.html       | 280 +++++++++++++++++-
 1 file changed, 274 insertions(+), 6 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/system/check/checknum/checknum.html b/ruoyi-admin/src/main/resources/templates/system/check/checknum/checknum.html
index c4ec13a..b7a90be 100644
--- a/ruoyi-admin/src/main/resources/templates/system/check/checknum/checknum.html
+++ b/ruoyi-admin/src/main/resources/templates/system/check/checknum/checknum.html
@@ -1,10 +1,278 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
 <head>
-    <meta charset="UTF-8">
-    <title>Title</title>
+    <th:block th:include="include :: header('考试统计')" />
+    <th:block th:include="include :: element-css" />
 </head>
-<body>
-1
+<style>
+    .count_box{
+        width: 95%;
+        height: 95%;
+        margin: 0 auto;
+    }
+    .count_top{
+        width: 100%;
+        height: 30%;
+    }
+    .count_top ul{
+        width: 100%;
+        height: 100%;
+        list-style: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0;
+    }
+    .count_top ul li{
+        width: 333px;
+        height: 168px;
+        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_top ul li:nth-child(1) .yuan{
+        background-color: #e2f0ff;
+    }
+    .count_top ul li:nth-child(2) .yuan{
+        background-color: #ffe7e9;
+    }
+    .count_top ul li:nth-child(3) .yuan{
+        background-color: #e3f7ef;
+    }
+    .count_top ul li i{
+        font-size: 33px;
+        position: absolute;
+        top: 72%;
+        left: 82%;
+        transform: translate(-50%,-50%);
+    }
+    .count_top ul li .textList{
+        position: absolute;
+        width: 80%;
+        height: 117px;
+        top: 18%;
+        left: 13px;
+    }
+    .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;
+    }
+    .count_bottom{
+        width: 100%;
+        height: 70%;
+        background-color: white;
+        border-radius: 10px;
+    }
+    .echart{
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        margin-top: 10px;
+        border-radius: 10px;
+        box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
+    }
+    .children_echarts{
+        width: 49%;
+        height: 100%;
+        margin-top: 20px;
+    }
+</style>
+<body class="gray-bg">
+<div class="container-div" id="app">
+    <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.yfc}}
+                        </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.wfc}}
+                        </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">
+            <div class="echart">
+                <div class="children_echarts left_echarts">
+                    <div id="leftMain" style="width: 600px;height:400px"></div>
+                </div>
+                <div class="children_echarts right_echarts">
+                    <div id="rightMain" style="width: 600px;height:400px"></div>
+                </div>
+            </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/checknum";
+    var app = new Vue({
+        el: '#app',
+        data: {
+            countList:[],
+        },
+        created(){
+            this.init()
+        },
+        methods:{
+            init(){
+                axios.post(prefix + '/countNotifyList').then(response => {
+                    this.countList = response.data.data
+                })
+            },
+        }
+    })
+    var myChart = echarts.init(document.getElementById('leftMain'));
+    axios.post(prefix + '/countResult').then(response => {
+        if (response.data.code == web_status.SUCCESS){
+            myChart.setOption({
+                title:{
+                    text:'检查结果统计'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    x: 'left',
+                    y:'bottom'
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '70%'],
+                        avoidLabelOverlap: false,
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 20,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: response.data.data.map((item,index) => ({
+                            ...item,
+                            itemStyle: {
+                                color: ['#99ff99','#66b3ff', '#ffcc99',][index]
+                            }
+                        }))
+                    }
+                ]
+            });
+        }
+    })
+    var rightMain = echarts.init(document.getElementById('rightMain'));
+    axios.post(prefix + '/countType').then(response => {
+        if (response.data.code == web_status.SUCCESS){
+            rightMain.setOption({
+                title:{
+                    text:'检查类型统计'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    x: 'left',
+                    y:'bottom'
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '70%'],
+                        avoidLabelOverlap: false,
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 20,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: response.data.data.map((item,index) => ({
+                            ...item,
+                            itemStyle: {
+                                color: ['#ff9999', '#66b3ff'][index]
+                            }
+                        }))
+                    }
+                ]
+            });
+        }
+    })
+</script>
 </body>
-</html>
\ No newline at end of file
+</html>
