507 lines
25 KiB
HTML
507 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<base href="/twoduty/">
|
||
<meta charset="UTF-8">
|
||
<title>"四五六"众力监督平台</title>
|
||
<link rel="stylesheet" href="assets/web/css/reset.css">
|
||
<link rel="stylesheet" href="assets/web/css/style.css">
|
||
</head>
|
||
<body style="background: #f5f5f5">
|
||
<div id="app">
|
||
<div class="header assessment-header">
|
||
<div class="banner">
|
||
<img src="assets/web/images/assessment-banner.png" alt="">
|
||
</div>
|
||
<div class="nav child">
|
||
<ul class="clearFloat" v-cloak>
|
||
<li>
|
||
<a href="indexweb">
|
||
<div class="left fl">
|
||
<span>首页</span>
|
||
<p>"四五六"众力监督平台</p>
|
||
</div>
|
||
<div class="right fr">
|
||
<img src="assets/web/images/nav-icon1.png" alt="">
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="route/web/notice.html">
|
||
<div class="left fl">
|
||
<span>相关通知</span>
|
||
<p>各部门通知公告</p>
|
||
</div>
|
||
<div class="right fr">
|
||
<img src="assets/web/images/nav-icon2.png" alt="">
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li :class="{active: pageId == '6f0ec363-49a9-4174-a48f-290b69495dfc'}">
|
||
<a href="route/web/public.html?id=6f0ec363-49a9-4174-a48f-290b69495dfc">
|
||
<div class="left fl">
|
||
<span>四个清单</span>
|
||
<p>四个清单</p>
|
||
</div>
|
||
<div class="right fr">
|
||
<img src="assets/web/images/nav-icon3.png" alt="">
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li :class="{active: pageId == 'cdd5ffd5-ebd7-4901-afce-f2e98d506c97'}">
|
||
<a href="route/web/public.html?id=cdd5ffd5-ebd7-4901-afce-f2e98d506c97">
|
||
<div class="left fl">
|
||
<span>五项流程</span>
|
||
<p>五项流程</p>
|
||
</div>
|
||
<div class="right fr">
|
||
<img src="assets/web/images/nav-icon5.png" alt="">
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li :class="{active: pageId == 'c912f0ff-d1e6-4346-a0cd-c955ea559a0b'}">
|
||
<a href="route/web/public.html?id=c912f0ff-d1e6-4346-a0cd-c955ea559a0b">
|
||
<div class="left fl">
|
||
<span>六本台账</span>
|
||
<p>六本台账</p>
|
||
</div>
|
||
<div class="right fr">
|
||
<img src="assets/web/images/nav-icon3.png" alt="">
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<!-- <li>-->
|
||
<!-- <a href="route/web/assessment.html">-->
|
||
<!-- <div class="left fl">-->
|
||
<!-- <span>记实考核</span>-->
|
||
<!-- <p>各类记实考核</p>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="right fr">-->
|
||
<!-- <img src="assets/web/images/nav-icon4.png" alt="">-->
|
||
<!-- </div>-->
|
||
<!-- </a>-->
|
||
<!-- </li>-->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="count clearFloat">
|
||
<div class="chart-box fl">
|
||
<div class="count-title">指标状态占比统计</div>
|
||
<div class="chart" id="chart"></div>
|
||
</div>
|
||
<div class="count-container fr">
|
||
<div class="count-title">指标状态统计</div>
|
||
<div class="count-out clearFloat" v-cloak>
|
||
<div class="count-box">
|
||
<span>{{countInfo.count1}}</span>
|
||
<p>未审核</p>
|
||
</div>
|
||
<div class="count-box">
|
||
<span>{{countInfo.count2}}</span>
|
||
<p>审核通过</p>
|
||
</div>
|
||
<div class="count-box">
|
||
<span>{{countInfo.count3}}</span>
|
||
<p>归档</p>
|
||
</div>
|
||
<div class="count-box">
|
||
<span>{{countInfo.count4}}</span>
|
||
<p>审核不通过</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="assessment-main clearFloat" v-cloak>
|
||
<div class="left-nav" v-if="navList && navList.length > 0">
|
||
<div class="nav-title">
|
||
<span>功能一览</span>
|
||
</div>
|
||
<div class="nav-tab" v-for="(nav, idx) in navList" :id="'nav' + idx">
|
||
<div class="tab-title" @click="openDetail(nav.id, nav.childrens, idx, 1)" :id="'item' + nav.id">{{nav.name}}</div>
|
||
<div class="hide-list" v-if="nav.childrens && nav.childrens.length > 0">
|
||
<ul>
|
||
<li v-for="(child, idx0) in nav.childrens">
|
||
<div class="nav-name" :id="'item' + child.id" @click="openDetail(child.id, child.childrens, idx0, 2)">{{child.name}}</div>
|
||
<div class="hide-list" v-if="child.childrens && child.childrens.length > 0">
|
||
<ul>
|
||
<li v-for="(child1, idx1) in child.childrens">
|
||
<div class="nav-name" :id="'item' + child1.id" @click="openDetail(child1.id, child1.childrens, idx1, 3)">{{child1.name}}</div>
|
||
<div class="hide-list" v-if="child1.childrens && child1.childrens.length > 0">
|
||
<ul>
|
||
<li v-for="(child2, idx2) in child1.childrens">
|
||
<div class="nav-name" :id="'item' + child2.id" @click="openDetail(child2.id, child2.childrens, idx2, 4)">{{child2.name}}</div>
|
||
<div class="hide-list" v-if="child1.childrens && child1.childrens.length > 0">
|
||
<ul>
|
||
<li v-for="(child3, idx3) in child2.childrens">
|
||
<div class="nav-name" :id="'item' + child3.id" @click="openDetail(child3.id, child3.childrens, idx3, 5)">{{child3.name}}</div>
|
||
<div class="hide-list" v-if="child1.childrens && child1.childrens.length > 0">
|
||
<ul>
|
||
<li v-for="(child4, idx4) in child3.childrens">
|
||
<div class="nav-name">{{child3.name}}</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-main" :class="{fullWidth: navList && navList.length == 0}">
|
||
<div class="assessment-search">
|
||
<div class="nav-title">
|
||
<span v-if="pageId == '6f0ec363-49a9-4174-a48f-290b69495dfc'">四个清单指标明细</span>
|
||
<span v-if="pageId == 'cdd5ffd5-ebd7-4901-afce-f2e98d506c97'">五项流程指标明细</span>
|
||
<span v-if="pageId == 'c912f0ff-d1e6-4346-a0cd-c955ea559a0b'">六本台账指标明细</span>
|
||
</div>
|
||
<div class="assessment-search-container clearFloat">
|
||
<div class="assessment-search-box">
|
||
<div class="search-title">标题检索</div>
|
||
<input type="text" placeholder="请输入关键字模糊查询" v-model="page.keywords">
|
||
</div>
|
||
<!-- <div class="assessment-search-box">-->
|
||
<!-- <div class="search-title">单位类型</div>-->
|
||
<!-- <select>-->
|
||
<!-- <option value="0">请选择单位类型</option>-->
|
||
<!-- <option value="1">类型1</option>-->
|
||
<!-- <option value="2">类型2</option>-->
|
||
<!-- </select>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="assessment-search-box">-->
|
||
<!-- <div class="search-title">单位</div>-->
|
||
<!-- <select>-->
|
||
<!-- <option value="0">请选择单位</option>-->
|
||
<!-- <option value="1">单位1</option>-->
|
||
<!-- <option value="2">单位2</option>-->
|
||
<!-- </select>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="assessment-search-box">-->
|
||
<!-- <div class="search-title">年度</div>-->
|
||
<!-- <select class="year">-->
|
||
<!-- <option value="0">2020</option>-->
|
||
<!-- <option value="1">2021</option>-->
|
||
<!-- </select>-->
|
||
<!-- </div>-->
|
||
<button @click="getMainList(curId)">搜索</button>
|
||
</div>
|
||
</div>
|
||
<div class="main-list">
|
||
<ul v-cloak v-if="mainList && mainList.length > 0">
|
||
<li v-for="(list,idx) in mainList">
|
||
<div class="line">
|
||
<span>类别：</span>{{list.indexLibName}}
|
||
</div>
|
||
<div class="line">
|
||
<span>简介：</span>{{list.indexLibRemark}}
|
||
</div>
|
||
<!-- <div class="line">-->
|
||
<!-- <span>指标明细项：</span>1.苏木镇(管委会）党（工）委每月研究部署、学习传达党风廉政建设相关工作1次，全年不少于12次，每缺1次扣0.2分。按月上报至考核系统。 <span>分值：2分</span>-->
|
||
<!-- </div>-->
|
||
<div class="line">
|
||
<span>操作：</span>
|
||
<a href="javascript: void(0);" class="operation-btn operation-examine" @click="doReport(list.indexTemplateSavePath, list.indexLibId)">上报</a>
|
||
<a href="javascript: void(0);" class="operation-btn operation-examine" @click="doReport(list.indexTemplateListPath, list.indexLibId)">查看列表</a>
|
||
<!-- <a href="javascript: void(0);" class="operation-btn operation-pass">已通过(0)</a>-->
|
||
<!-- <a href="javascript: void(0);" class="operation-btn operation-not-pass">未通过(0)</a>-->
|
||
<!-- <a href="javascript: void(0);" class="operation-btn operation-score">得分</a>-->
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="no-data" v-else>
|
||
<img src="assets/web/images/no-data.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="pager" v-cloak v-if="page.totalPage > 1">
|
||
<span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
|
||
<ul class="clearFloat" v-if="page.totalPage > 0 && page.totalPage <= 5">
|
||
<li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
|
||
{{cpage}}
|
||
</li>
|
||
</ul>
|
||
<ul class="clearFloat" v-if="page.totalPage > 5">
|
||
<li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
|
||
{{cpage}}
|
||
</li>
|
||
<li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
|
||
{{page.totalPage - 5 + cpage}}
|
||
</li>
|
||
<li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
|
||
{{page.page - (3 - cpage)}}
|
||
</li>
|
||
</ul>
|
||
<span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-nav">
|
||
<div class="nav-title">门户导航</div>
|
||
<div class="nav-list" v-cloak>
|
||
<a :href="nav.dataSummary" v-for="nav in bottomNavList" target="_blank">{{nav.dataName}}</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<!-- 版权所有：杭锦旗纪委监察局 备案号：蒙ICP备 14000612 技术支持：内蒙古成迈信息科技有限公司（0471-5316868）-->
|
||
</div>
|
||
</div>
|
||
<script src="assets/web/js/jquery-2.1.4.min.js"></script>
|
||
<script src="assets/web/js/jquery.SuperSlide.2.1.1.js"></script>
|
||
<script src="assets/web/js/vue.js"></script>
|
||
<script src="assets/web/js/echarts.js"></script>
|
||
<script src="assets/js/restajax.js"></script>
|
||
<script src="assets/js/dialog.js"></script>
|
||
<script src="assets/js/datamessage.js"></script>
|
||
<script src="assets/web/layer-v3.3.0/layer/layer.js"></script>
|
||
<script>
|
||
var vue = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
page: {
|
||
page: 1,
|
||
rows: 10,
|
||
totalPage: 10,
|
||
keywords: ''
|
||
},
|
||
navList: [],
|
||
mainList: [],
|
||
curId: '',
|
||
topNavList: [],
|
||
loadLayerIndex: '',
|
||
pageId: '',
|
||
bottomNavList: [],
|
||
countInfo: {}
|
||
},
|
||
methods: {
|
||
// 饼图
|
||
initChart: function () {
|
||
var self = this;
|
||
var echartsRadar = echarts.init(document.getElementById("chart"));
|
||
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.countInfo.count1, name: '未审核',},
|
||
{value: self.countInfo.count2, name: '审核通过',},
|
||
{value: self.countInfo.count3, name: '归档',},
|
||
{value: self.countInfo.count4, 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);
|
||
},
|
||
// 获取左侧菜单
|
||
getNav: function () {
|
||
var self = this;
|
||
top.restAjax.get(top.restAjax.path('api/indexlib/listztreeweb/{indexLibParentId}', [self.curId]), {}, null, function(code, data) {
|
||
self.navList = data
|
||
if (data.length > 0) {
|
||
self.$nextTick(function () {
|
||
self.getDefault(data[0])
|
||
})
|
||
} else {
|
||
self.getMainList(self.curId)
|
||
}
|
||
}, function(code, data) {
|
||
layer.msg(data.msg);
|
||
}, function() {
|
||
// loadLayerIndex1 = layer.load(0, {shade: false});
|
||
}, function() {
|
||
// layer.close(loadLayerIndex1);
|
||
});
|
||
},
|
||
// 获取默认加载项
|
||
getDefault: function (item) {
|
||
this.page.keywords = ''
|
||
$('#item' + item.id).addClass('active')
|
||
if (item.childrens.length == 0) {
|
||
this.curId = item.id
|
||
this.getMainList(item.id)
|
||
} else {
|
||
$('#item' + item.id).next().show()
|
||
this.getDefault(item.childrens[0])
|
||
}
|
||
},
|
||
// 展开菜单或加载右侧
|
||
openDetail: function (id, children, idx, lv) {
|
||
var self = this
|
||
var node = $('#item' + id)
|
||
console.log(lv)
|
||
if (lv < 5) {
|
||
if (children.length > 0) {
|
||
node.next().slideToggle()
|
||
if (node.hasClass('tab-title')) {
|
||
node.toggleClass('active')
|
||
node.toggleClass('bordered')
|
||
$('#nav' + idx).siblings().find('.hide-list').slideUp()
|
||
$('#nav' + idx).siblings().find('.tab-title').removeClass('active')
|
||
$('#nav' + idx).siblings().find('.tab-title').removeClass('bordered')
|
||
$('#nav' + idx).siblings().find('.nav-name').removeClass('bordered')
|
||
$('#nav' + idx).siblings().find('.nav-name').removeClass('active')
|
||
} else if (node.hasClass('nav-name')) {
|
||
node.toggleClass('active')
|
||
node.toggleClass('bordered')
|
||
node.parent().siblings().find('.nav-name').removeClass('active')
|
||
node.parent().siblings().find('.nav-name').removeClass('bordered')
|
||
node.parent().siblings().find('.hide-list').slideUp()
|
||
}
|
||
} else {
|
||
node.toggleClass('active')
|
||
node.parent().siblings().find('.tab-title').removeClass('active')
|
||
node.parent().siblings().find('.tab-title').removeClass('bordered')
|
||
node.parent().siblings().find('.hide-list').slideUp()
|
||
node.parent().siblings().find('.nav-name').removeClass('active')
|
||
node.parent().siblings().find('.nav-name').removeClass('bordered')
|
||
self.curId = id
|
||
self.getMainList(id)
|
||
}
|
||
} else {
|
||
|
||
node.toggleClass('active')
|
||
node.parent().siblings().find('.tab-title').removeClass('active')
|
||
node.parent().siblings().find('.tab-title').removeClass('bordered')
|
||
node.parent().siblings().find('.hide-list').slideUp()
|
||
node.parent().siblings().find('.nav-name').removeClass('active')
|
||
node.parent().siblings().find('.nav-name').removeClass('bordered')
|
||
self.curId = id
|
||
self.getMainList(id)
|
||
}
|
||
},
|
||
// 获取右侧列表
|
||
getMainList: function (id) {
|
||
var self = this;
|
||
self.mainList = []
|
||
// var loadLayerIndex;
|
||
top.restAjax.get(top.restAjax.path('api/indexlib/listpageweb/{indexLibParentId}', [id]), self.page, null, function(code, data) {
|
||
for (let i = 0; i < data.rows.length; i++) {
|
||
if (!data.rows[i].indexLibRemark) {
|
||
data.rows[i].indexLibRemark = '暂无'
|
||
}
|
||
}
|
||
self.mainList = data.rows
|
||
self.page.page = data.page
|
||
self.page.totalPage = Math.ceil(data.total / self.page.rows)
|
||
}, function(code, data) {
|
||
layer.msg(data.msg);
|
||
}, function() {
|
||
self.loadLayerIndex = layer.load(0, {shade: false});
|
||
}, function() {
|
||
layer.close(self.loadLayerIndex);
|
||
});
|
||
},
|
||
// 分页
|
||
paging: function (page) {
|
||
this.page.page = page
|
||
this.getMainList(this.curId)
|
||
},
|
||
// 获取顶部导航
|
||
getTopNav: function () {
|
||
var self = this
|
||
// var loadLayerIndex;
|
||
top.restAjax.get(top.restAjax.path('api/indexlib/listwebtags', []), {}, null, function(code, data) {
|
||
self.topNavList = data
|
||
}, function(code, data) {
|
||
layer.msg(data.msg);
|
||
}, function() {
|
||
// loadLayerIndex = layer.load(0, {shade: false});
|
||
}, function() {
|
||
// layer.close(loadLayerIndex);
|
||
});
|
||
},
|
||
// 顶部导航跳转页面
|
||
goNav: function (id) {
|
||
window.location.href = 'route/web/public.html?id=' + id
|
||
},
|
||
// 上报、查看列表
|
||
doReport: function (path, id) {
|
||
var self = this
|
||
layer.open({
|
||
type: 2,
|
||
title: false,
|
||
closeBtn: true,
|
||
area: ['70%', '70%'],
|
||
shadeClose: true,
|
||
anim: 2,
|
||
content: top.restAjax.path(path + '{id}', [id]),
|
||
end: function() {
|
||
self.getMainList(self.curId)
|
||
}
|
||
});
|
||
},
|
||
// 获取门户导航
|
||
getGateNav: function () {
|
||
var self = this
|
||
top.restAjax.get(top.restAjax.path('api/data/listbyparentid/{dataParentId}', ['3a32e7d5-a2ee-4cdf-959d-70d0e50e4389']), {}, null, function(code, data) {
|
||
self.bottomNavList = data
|
||
}, function(code, data) {
|
||
layer.msg(data.msg);
|
||
}, function() {
|
||
// loadLayerIndex = layer.load(0, {shade: false});
|
||
}, function() {
|
||
// layer.close(loadLayerIndex);
|
||
});
|
||
},
|
||
// 获取统计信息
|
||
getCount: function () {
|
||
var self = this
|
||
top.restAjax.get(top.restAjax.path('api/indexlib/countIndexLib/{indexLibParentId}', [self.curId]), {}, null, function(code, data) {
|
||
self.countInfo = data
|
||
self.initChart()
|
||
}, function(code, data) {
|
||
layer.msg(data.msg);
|
||
}, function() {
|
||
// loadLayerIndex = layer.load(0, {shade: false});
|
||
}, function() {
|
||
// layer.close(loadLayerIndex);
|
||
});
|
||
}
|
||
},
|
||
mounted: function () {
|
||
this.curId = restAjax.params(window.location.href).id
|
||
this.pageId = restAjax.params(window.location.href).id
|
||
|
||
this.getNav()
|
||
// this.getTopNav()
|
||
this.getGateNav()
|
||
this.getCount()
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|