From 1716f821d423878742f55919bcf4d9d07e850f77 Mon Sep 17 00:00:00 2001
From: dong_bo0602 <358256383@qq.com>
Date: Tue, 10 Aug 2021 14:25:05 +0800
Subject: [PATCH] 0810

---
 .../resources/static/assets/web/css/style.css |  44 ++-
 src/main/resources/templates/index.html       | 356 +++++++++++++++++-
 2 files changed, 395 insertions(+), 5 deletions(-)

diff --git a/src/main/resources/static/assets/web/css/style.css b/src/main/resources/static/assets/web/css/style.css
index 8bce2df..693ea93 100644
--- a/src/main/resources/static/assets/web/css/style.css
+++ b/src/main/resources/static/assets/web/css/style.css
@@ -46,7 +46,13 @@
 .news .news-box .news-list ul li span{float:right}
 .slide-news{position:relative;z-index:100;width:1200px;margin:30px auto}
 .slide-news .slide{width:66%;height:420px;float:left}
+.slide{position: relative;}
 .slide .bd a{display:block;position:relative}
+.slide .hd{position: absolute;right:10px;bottom:12px;}
+.slide .hd ul:after{content:'';display: block;clear: both;}
+.slide .hd ul li{width:15px;height:15px;border-radius: 50%;background: #fff;cursor: pointer;float:left;margin-right:10px;text-align: center;color: #000;line-height: 15px;font-size: 12px;}
+.slide .hd ul li:last-child{margin-right: 0}
+.slide .hd ul li.on{background: #064ec0;color:#fff;}
 .dynamic-news,.slide{position:relative}
 .dynamic-news>a,.slide>a{display:block;width:50px;height:50px;position:absolute;top:50%;margin-top:-25px}
 .dynamic-news>a.prev,.slide>a.prev{left:10px;background:url(../images/prev.png) no-repeat center;background-size:100% 100%}
@@ -54,7 +60,7 @@
 .dynamic-news>a.next,.slide>a.next{right:10px;background:url(../images/next.png) no-repeat center;background-size:100% 100%}
 .dynamic-news>a.next:hover,.slide>a.next:hover{background:url(../images/next-on.png) no-repeat center}
 .slide .bd a img{width:100%;height:420px}
-.slide-text{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:14px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:40px;line-height:40px;padding:0 10px;box-sizing:border-box}
+.slide-text{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:14px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:40px;line-height:40px;padding:0 100px 0 10px;box-sizing:border-box;}
 .slide-news .exposure-news{width:32%;float:right}
 .exposure-box{float:left;width:96px}
 .exposure-box img{width:96px;height:96px}
@@ -97,6 +103,7 @@
 .news-detail img,.news-detail video{max-width:100%!important}
 .assessment-header .banner img{width:100%}
 .count{width:1200px;margin:20px auto;padding:15px 15px 0;box-sizing:border-box;background:#fff}
+.count>h3{font-size: 20px;color: #333;font-weight: normal;margin-bottom: 10px;}
 .chart-box{width:260px}
 .count-title{padding-left:10px;border-left:5px solid #3d41b7;font-size:16px;color:#333}
 .chart{width:260px;height:170px;margin-top:10px}
@@ -229,3 +236,38 @@
     border-radius: 10px;
     box-shadow: 0 0 17px #DEDEDE;
 }
+.fix-box{
+    position: fixed;
+    top:50%;
+    right:0;
+    transform: translate(0,-50%);
+    padding:0 15px 15px;
+    background: #fff;
+    width: 200px;
+    z-index: 100;
+    box-shadow: 0 0 10px #EEE;
+}
+.fix-title{
+    border-bottom: 1px solid #eee;
+    line-height: 45px;
+    font-size: 18px;
+    text-align: center;
+    color: #333;
+}
+.scroll-slide-title,.scroll-slide li{
+    font-size: 0;
+}
+.scroll-slide-title span,.scroll-slide span{
+    display: inline-block;
+    font-size: 16px;
+    line-height: 30px;
+    text-align: center;
+    width: 20%;
+    vertical-align: top;
+}
+.scroll-slide-title span:first-child,.scroll-slide span:first-child{
+    width:40%;
+    white-space: nowrap;
+    overflow:hidden;
+    text-overflow: ellipsis;
+}
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 097f52f..b4ca1b1 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -127,6 +127,11 @@
                         </li>
                     </ul>
                 </div>
+                <div class="hd" v-cloak>
+                    <ul>
+                        <li v-for="(banner,idx) in bannerList">{{idx+1}}</li>
+                    </ul>
+                </div>
                 <a href="javascript: void(0);" class="prev"></a>
                 <a href="javascript: void(0);" class="next"></a>
             </div>
@@ -180,7 +185,90 @@
             </div>
         </div>
     </div>
-
+    <div class="count clearFloat">
+        <h3>四个清单</h3>
+        <div class="chart-box fl">
+            <div class="count-title">指标状态占比统计</div>
+            <div class="chart" id="chart4"></div>
+        </div>
+        <div class="count-container fr">
+            <div class="count-title">指标状态统计</div>
+            <div class="count-out clearFloat" v-cloak>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_1.html')">
+                    <span>{{countInfo4.checkPendingNum}}</span>
+                    <p>未审核</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_2.html')">
+                    <span>{{countInfo4.checkPassNum}}</span>
+                    <p>审核通过</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_3.html')">
+                    <span>{{countInfo4.checkArchivesNum}}</span>
+                    <p>归档</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_4.html')">
+                    <span>{{countInfo4.checkNoPassNum}}</span>
+                    <p>审核不通过</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="count clearFloat">
+        <h3>五项流程</h3>
+        <div class="chart-box fl">
+            <div class="count-title">指标状态占比统计</div>
+            <div class="chart" id="chart5"></div>
+        </div>
+        <div class="count-container fr">
+            <div class="count-title">指标状态统计</div>
+            <div class="count-out clearFloat" v-cloak>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_1.html')">
+                    <span>{{countInfo5.checkPendingNum}}</span>
+                    <p>未审核</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_2.html')">
+                    <span>{{countInfo5.checkPassNum}}</span>
+                    <p>审核通过</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_3.html')">
+                    <span>{{countInfo5.checkArchivesNum}}</span>
+                    <p>归档</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_4.html')">
+                    <span>{{countInfo5.checkNoPassNum}}</span>
+                    <p>审核不通过</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="count clearFloat">
+        <h3>六本台账</h3>
+        <div class="chart-box fl">
+            <div class="count-title">指标状态占比统计</div>
+            <div class="chart" id="chart6"></div>
+        </div>
+        <div class="count-container fr">
+            <div class="count-title">指标状态统计</div>
+            <div class="count-out clearFloat" v-cloak>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_1.html')">
+                    <span>{{countInfo6.checkPendingNum}}</span>
+                    <p>未审核</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_2.html')">
+                    <span>{{countInfo6.checkPassNum}}</span>
+                    <p>审核通过</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_3.html')">
+                    <span>{{countInfo6.checkArchivesNum}}</span>
+                    <p>归档</p>
+                </div>
+                <div class="count-box" @click="openCountDetail('route/indexaudit/list_4.html')">
+                    <span>{{countInfo6.checkNoPassNum}}</span>
+                    <p>审核不通过</p>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="bottom-nav">
         <div class="nav-title">门户导航</div>
         <div class="nav-list" v-cloak>
@@ -188,7 +276,70 @@
         </div>
     </div>
     <div class="footer">
-<!--        版权所有：杭锦旗纪委监察局   备案号：蒙ICP备 14000612   技术支持：内蒙古成迈信息科技有限公司（0471-5316868）-->
+        版权所有：杭锦旗纪委监察局   备案号：蒙ICP备 14000612   技术支持：内蒙古成迈信息科技有限公司（0471-5316868）
+    </div>
+    <div class="fix-box">
+        <div class="fix-title">今日上报统计</div>
+        <div class="scroll-slide-title">
+            <span>单位名称</span>
+            <span>四</span>
+            <span>五</span>
+            <span>六</span>
+        </div>
+        <div class="scroll-slide">
+            <div class="bd">
+                <ul>
+                    <li>
+                        <span>单位1</span>
+                        <span>0</span>
+                        <span>0</span>
+                        <span>0</span>
+                    </li>
+                    <li>
+                        <span>单位1</span>
+                        <span>0</span>
+                        <span>0</span>
+                        <span>0</span>
+                    </li>
+                    <li>
+                        <span>单位1</span>
+                        <span>0</span>
+                        <span>0</span>
+                        <span>0</span>
+                    </li>
+                    <li>
+                        <span>单位1</span>
+                        <span>0</span>
+                        <span>0</span>
+                        <span>0</span>
+                    </li>
+                    <li>
+                        <span>单位1</span>
+                        <span>0</span>
+                        <span>0</span>
+                        <span>0</span>
+                    </li>
+                    <li>
+                        <span>单位1</span>
+                        <span>0</span>
+                        <span>0</span>
+                        <span>0</span>
+                    </li>
+                    <li>
+                        <span>单位1</span>
+                        <span>0</span>
+                        <span>0</span>
+                        <span>0</span>
+                    </li>
+                    <li>
+                        <span>单位1</span>
+                        <span>0</span>
+                        <span>0</span>
+                        <span>0</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
     <!--<input type="hidden" th:value="${userParams.departmentId}" class="hide-input">-->
 </div>
@@ -199,6 +350,7 @@
 <script src="assets/js/restajax.js"></script>
 <script src="assets/web/layer-v3.3.0/layer/layer.js"></script>
 <script src="assets/web/js/nicescroll.js"></script>
+<script src="assets/web/js/echarts.js"></script>
 <script>
     var vue = new Vue({
         el: '#app',
@@ -215,9 +367,201 @@
             fourList: [],
             fiveStep: [],
             sixBook: [],
-            departmentId: ''
+            departmentId: '',
+            countInfo4: {},
+            countInfo5: {},
+            countInfo6: {}
         },
         methods: {
+            // 饼图
+            initChart4: function () {
+                var self = this;
+                var echartsRadar = echarts.init(document.getElementById("chart4"));
+                var option = {
+                    tooltip: {
+                        trigger: 'item',
+                        formatter: '{b} : {c} ({d}%)'
+                    },
+                    legend: {
+                        x: '0',
+                        y: '25px',
+                        orient: 'vertical'
+                    },
+                    series: [
+                        {
+                            type: 'pie',
+                            radius: '65%',
+                            center: ['70%', '50%'],
+                            selectedMode: 'single',
+                            data: [
+                                {value: self.countInfo4.checkPendingNum, name: '未审核',},
+                                {value: self.countInfo4.checkPassNum, name: '审核通过',},
+                                {value: self.countInfo4.checkArchivesNum, name: '归档',},
+                                {value: self.countInfo4.checkNoPassNum, name: '审核不通过',}
+                            ],
+                            label: {
+                                normal: {
+                                    show: false,
+                                    position: 'inside',
+                                    formatter:"{b}:{d}%"
+                                }
+                            },
+                            emphasis: {
+                                itemStyle: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ],
+                    // color: ['#0097f0','#7ecef4']
+                };
+                echartsRadar.setOption(option);
+            },
+            // 饼图
+            initChart5: function () {
+                var self = this;
+                var echartsRadar = echarts.init(document.getElementById("chart5"));
+                var option = {
+                    tooltip: {
+                        trigger: 'item',
+                        formatter: '{b} : {c} ({d}%)'
+                    },
+                    legend: {
+                        x: '0',
+                        y: '25px',
+                        orient: 'vertical'
+                    },
+                    series: [
+                        {
+                            type: 'pie',
+                            radius: '65%',
+                            center: ['70%', '50%'],
+                            selectedMode: 'single',
+                            data: [
+                                {value: self.countInfo5.checkPendingNum, name: '未审核',},
+                                {value: self.countInfo5.checkPassNum, name: '审核通过',},
+                                {value: self.countInfo5.checkArchivesNum, name: '归档',},
+                                {value: self.countInfo5.checkNoPassNum, name: '审核不通过',}
+                            ],
+                            label: {
+                                normal: {
+                                    show: false,
+                                    position: 'inside',
+                                    formatter:"{b}:{d}%"
+                                }
+                            },
+                            emphasis: {
+                                itemStyle: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ],
+                    // color: ['#0097f0','#7ecef4']
+                };
+                echartsRadar.setOption(option);
+            },
+            // 饼图
+            initChart6: function () {
+                var self = this;
+                var echartsRadar = echarts.init(document.getElementById("chart6"));
+                var option = {
+                    tooltip: {
+                        trigger: 'item',
+                        formatter: '{b} : {c} ({d}%)'
+                    },
+                    legend: {
+                        x: '0',
+                        y: '25px',
+                        orient: 'vertical'
+                    },
+                    series: [
+                        {
+                            type: 'pie',
+                            radius: '65%',
+                            center: ['70%', '50%'],
+                            selectedMode: 'single',
+                            data: [
+                                {value: self.countInfo6.checkPendingNum, name: '未审核',},
+                                {value: self.countInfo6.checkPassNum, name: '审核通过',},
+                                {value: self.countInfo6.checkArchivesNum, name: '归档',},
+                                {value: self.countInfo6.checkNoPassNum, name: '审核不通过',}
+                            ],
+                            label: {
+                                normal: {
+                                    show: false,
+                                    position: 'inside',
+                                    formatter:"{b}:{d}%"
+                                }
+                            },
+                            emphasis: {
+                                itemStyle: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ],
+                    // color: ['#0097f0','#7ecef4']
+                };
+                echartsRadar.setOption(option);
+            },
+            // 获取统计信息
+            getCount4: function () {
+                var self = this
+                top.restAjax.get(top.restAjax.path('api/indexaudit/count-auth', []), {
+                    indexLibIdParentId: '6f0ec363-49a9-4174-a48f-290b69495dfc',
+                    departmentId: ''
+                }, null, function(code, data) {
+                    self.countInfo4 = data
+                    self.initChart4()
+                }, function(code, data) {
+                    layer.msg(data.msg);
+                }, function() {
+                    // loadLayerIndex = layer.load(0, {shade: false});
+                }, function() {
+                    // layer.close(loadLayerIndex);
+                });
+            },
+            // 获取统计信息
+            getCount5: function () {
+                var self = this
+                top.restAjax.get(top.restAjax.path('api/indexaudit/count-auth', []), {
+                    indexLibIdParentId: 'cdd5ffd5-ebd7-4901-afce-f2e98d506c97',
+                    departmentId: ''
+                }, null, function(code, data) {
+                    self.countInfo5 = data
+                    self.initChart5()
+                }, function(code, data) {
+                    layer.msg(data.msg);
+                }, function() {
+                    // loadLayerIndex = layer.load(0, {shade: false});
+                }, function() {
+                    // layer.close(loadLayerIndex);
+                });
+            },
+            // 获取统计信息
+            getCount6: function () {
+                var self = this
+                top.restAjax.get(top.restAjax.path('api/indexaudit/count-auth', []), {
+                    indexLibIdParentId: 'c912f0ff-d1e6-4346-a0cd-c955ea559a0b',
+                    departmentId: ''
+                }, null, function(code, data) {
+                    self.countInfo6 = data
+                    self.initChart6()
+                }, function(code, data) {
+                    layer.msg(data.msg);
+                }, function() {
+                    // loadLayerIndex = layer.load(0, {shade: false});
+                }, function() {
+                    // layer.close(loadLayerIndex);
+                });
+            },
             // 获取顶部导航
             getTopNav: function () {
                 var self = this
@@ -307,7 +651,7 @@
                     }
                     self.bannerList = data.rows
                     self.$nextTick(function () {
-                        jQuery(".slide").slide({mainCell:".bd ul",effect:"left",autoPlay:true,delayTime:500});
+                        jQuery(".slide").slide({mainCell:".bd ul",effect:"left",autoPlay:true,delayTime:500,trigger:"click"});
                     })
                 }, function(code, data) {
                     layer.msg(data.msg);
@@ -395,9 +739,13 @@
             this.getFourList()
             this.getFiveStep()
             this.getSixBook()
+            this.getCount4()
+            this.getCount5()
+            this.getCount6()
             $('.street-box').niceScroll()
             $('.news-list ul').niceScroll()
             this.departmentId = $('.hide-input').val()
+            jQuery(".scroll-slide").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:5,interTime:50,trigger:"click"});
         }
     })
 </script>