0810
This commit is contained in:
dong_bo0602
parent
2eeb858dc0
commit
1716f821d4
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user