This commit is contained in:
dong_bo0602 2021-08-10 14:25:05 +08:00
parent 2eeb858dc0
commit 1716f821d4
2 changed files with 395 additions and 5 deletions

View File

@ -46,7 +46,13 @@
.news .news-box .news-list ul li span{float:right} .news .news-box .news-list ul li span{float:right}
.slide-news{position:relative;z-index:100;width:1200px;margin:30px auto} .slide-news{position:relative;z-index:100;width:1200px;margin:30px auto}
.slide-news .slide{width:66%;height:420px;float:left} .slide-news .slide{width:66%;height:420px;float:left}
.slide{position: relative;}
.slide .bd a{display:block;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,.slide{position:relative}
.dynamic-news>a,.slide>a{display:block;width:50px;height:50px;position:absolute;top:50%;margin-top:-25px} .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%} .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,.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} .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 .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} .slide-news .exposure-news{width:32%;float:right}
.exposure-box{float:left;width:96px} .exposure-box{float:left;width:96px}
.exposure-box img{width:96px;height:96px} .exposure-box img{width:96px;height:96px}
@ -97,6 +103,7 @@
.news-detail img,.news-detail video{max-width:100%!important} .news-detail img,.news-detail video{max-width:100%!important}
.assessment-header .banner img{width:100%} .assessment-header .banner img{width:100%}
.count{width:1200px;margin:20px auto;padding:15px 15px 0;box-sizing:border-box;background:#fff} .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} .chart-box{width:260px}
.count-title{padding-left:10px;border-left:5px solid #3d41b7;font-size:16px;color:#333} .count-title{padding-left:10px;border-left:5px solid #3d41b7;font-size:16px;color:#333}
.chart{width:260px;height:170px;margin-top:10px} .chart{width:260px;height:170px;margin-top:10px}
@ -229,3 +236,38 @@
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 17px #DEDEDE; 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;
}

View File

@ -127,6 +127,11 @@
</li> </li>
</ul> </ul>
</div> </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="prev"></a>
<a href="javascript: void(0);" class="next"></a> <a href="javascript: void(0);" class="next"></a>
</div> </div>
@ -180,7 +185,90 @@
</div> </div>
</div> </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="bottom-nav">
<div class="nav-title">门户导航</div> <div class="nav-title">门户导航</div>
<div class="nav-list" v-cloak> <div class="nav-list" v-cloak>
@ -188,7 +276,70 @@
</div> </div>
</div> </div>
<div class="footer"> <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> </div>
<!--<input type="hidden" th:value="${userParams.departmentId}" class="hide-input">--> <!--<input type="hidden" th:value="${userParams.departmentId}" class="hide-input">-->
</div> </div>
@ -199,6 +350,7 @@
<script src="assets/js/restajax.js"></script> <script src="assets/js/restajax.js"></script>
<script src="assets/web/layer-v3.3.0/layer/layer.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/nicescroll.js"></script>
<script src="assets/web/js/echarts.js"></script>
<script> <script>
var vue = new Vue({ var vue = new Vue({
el: '#app', el: '#app',
@ -215,9 +367,201 @@
fourList: [], fourList: [],
fiveStep: [], fiveStep: [],
sixBook: [], sixBook: [],
departmentId: '' departmentId: '',
countInfo4: {},
countInfo5: {},
countInfo6: {}
}, },
methods: { 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 () { getTopNav: function () {
var self = this var self = this
@ -307,7 +651,7 @@
} }
self.bannerList = data.rows self.bannerList = data.rows
self.$nextTick(function () { 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) { }, function(code, data) {
layer.msg(data.msg); layer.msg(data.msg);
@ -395,9 +739,13 @@
this.getFourList() this.getFourList()
this.getFiveStep() this.getFiveStep()
this.getSixBook() this.getSixBook()
this.getCount4()
this.getCount5()
this.getCount6()
$('.street-box').niceScroll() $('.street-box').niceScroll()
$('.news-list ul').niceScroll() $('.news-list ul').niceScroll()
this.departmentId = $('.hide-input').val() this.departmentId = $('.hide-input').val()
jQuery(".scroll-slide").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:5,interTime:50,trigger:"click"});
} }
}) })
</script> </script>