twoduty/src/main/resources/static/route/web/public.html
2021-10-21 16:59:35 +08:00

579 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<link rel="stylesheet" href="assets/web/css/index.css">
</head>
<body style="background: #f5f5f5;">
<div id="app">
<div class="header child-header">
<div class="date-outer">
<div class="date">
<div class="day" v-cloak>
<span>今天是:</span>{{today}}
</div>
<div class="weather" v-cloak>
今天:{{weatherInfo.city}}
<img :src="weatherInfo.image" alt="">
{{weatherInfo.text}}{{weatherInfo.temperature}}℃
</div>
</div>
</div>
<div class="logo-nav">
<div class="logo-nav-content">
<!-- <div class="logo">
<a href="indexweb">
<img src="assets/web/images/logo.png" alt="">
</a>
</div>-->
<div class="nav child-nav">
<ul>
<li>
<a href="indexweb">首页</a>
</li>
<li>
<a href="route/web/news-list-column.html?pageId=04988903-8948-4645-9024-6c97f770c8d7">党纪法规</a>
</li>
<li>
<a href="javascript: void(0);">
办公平台
<div class="child">
<span @click="goPublicPage('6f0ec363-49a9-4174-a48f-290b69495dfc')">四个清单</span>
<span @click="goPublicPage('cdd5ffd5-ebd7-4901-afce-f2e98d506c97')">五项流程</span>
<span @click="goPublicPage('c912f0ff-d1e6-4346-a0cd-c955ea559a0b')">六本台账</span>
</div>
</a>
</li>
<li>
<a href="route/web/news-list.html?pageId=3c0d1478-f75a-42a6-9bb5-7fa30d854b9b">通知公告</a>
</li>
<li>
<a href="route/web/news-list-column.html?pageId=68167be6-3dbd-49d3-a956-d07e3e4384e5">警示教育</a>
</li>
<li>
<a href="route/web/news-list-column.html?pageId=79da7965-1bff-4471-babe-7874474cb418">学习园地</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="page-icon" style="width: 1200px;margin: 20px auto;">
<img src="assets/web/images/four-title-icon.png" alt="" v-if="pageId == '6f0ec363-49a9-4174-a48f-290b69495dfc'">
<img src="assets/web/images/five-title-icon.png" alt="" v-if="pageId == 'cdd5ffd5-ebd7-4901-afce-f2e98d506c97'">
<img src="assets/web/images/six-title-icon.png" alt="" v-if="pageId == 'c912f0ff-d1e6-4346-a0cd-c955ea559a0b'">
</div>
<div class="count clearFloat">
<div class="chart-box fl" style="float:left;width:22%;">
<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" @click="openCountDetail('route/indexaudit/list_1.html')">
<span>{{countInfo.checkPendingNum}}</span>
<p>未审核</p>
</div>
<div class="count-box" @click="openCountDetail('route/indexaudit/list_2.html')">
<span>{{countInfo.checkPassNum}}</span>
<p>审核通过</p>
</div>
<div class="count-box" @click="openCountDetail('route/indexaudit/list_3.html')">
<span>{{countInfo.checkArchivesNum}}</span>
<p>归档</p>
</div>
<div class="count-box" @click="openCountDetail('route/indexaudit/list_4.html')">
<span>{{countInfo.checkNoPassNum}}</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-container">
<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 class="shadow"></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)" v-if="list.initButton && list.initButton.length > 0 && list.showReport">上报</a>
<a href="javascript: void(0);" class="operation-btn operation-examine" @click="doReport(list.indexTemplateListPath, list.indexLibId)" v-if="list.initButton && list.initButton.length > 0 && list.showList">查看列表</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>-->
<!--<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">
版权所有:沧州市运河区纪律检查委员会
</div>
</div>
<script src="assets/web/js/jquery-2.1.4.min.js"></script>
<script src="assets/web/js/nicescroll.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: '',
pageId: '',
topNavList: [],
loadLayerIndex: '',
bottomNavList: [],
countInfo: {},
initLeft: '',
curContentId: '',
departmentId: '',
weatherInfo: {},
today: ''
},
methods: {
// 头部导航跳转四五六
goPublicPage: function (id) {
window.location.href = 'route/web/public.html?id=' + id
},
// 饼图
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'
},
color: ['#d3d6d7','#3ab896','#f4c736','#e94d43'],
series: [
{
type: 'pie',
radius: '65%',
center: ['70%', '50%'],
selectedMode: 'single',
data: [
{value: self.countInfo.checkPendingNum, name: '未审核',},
{value: self.countInfo.checkPassNum, name: '审核通过',},
{value: self.countInfo.checkArchivesNum, name: '归档',},
{value: self.countInfo.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);
},
// 获取左侧菜单
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 (self.initLeft != '') {
self.$nextTick(function () {
$('#item' + self.curContentId).addClass('active')
})
self.getMainList(self.curContentId)
} else {
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)
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 = '暂无'
}
if (data.rows[i].initButton.length == 1) {
if (data.rows[i].initButton[0] == '1') {
data.rows[i]['showReport'] = true
data.rows[i]['showList'] = false
} else {
data.rows[i]['showReport'] = false
data.rows[i]['showList'] = true
}
} else {
data.rows[i]['showList'] = true
data.rows[i]['showReport'] = true
}
}
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: ['80%', '80%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path(path + '{id}', [id]),
end: function() {
self.getMainList(self.curId)
self.getCount();
// location.reload();
}
});
},
// 获取门户导航
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/indexaudit/count-auth', []), {
indexLibIdParentId: self.pageId,
departmentId: self.departmentId
}, 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);
});
},
// 未审核
openCountDetail: function (path) {
var self = this
var id = this.pageId
layer.open({
type: 2,
title: false,
closeBtn: true,
area: ['70%', '70%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path(path + '?indexLibIdParentId=' + '{id}' + '&departmentId=' + self.departmentId, [id]),
end: function() {
// self.getMainList(self.curId)
location.reload();
}
});
},
// 获取天气
getWeahther: function () {
var self = this
top.restAjax.get(top.restAjax.path('api/weather/get-weather-now', []), {}, null, function(code, data) {
self.weatherInfo = data
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex);
});
},
// 获取日期
getDate: function () {
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate(); //获取当前日
var week = myDate.getDay();
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
this.today = year + "年" + mon + "月" + date + "日 " + weeks[week]
},
},
mounted: function () {
var id = restAjax.params(window.location.href).id
this.curId = id
this.pageId = id
if (restAjax.params(window.location.href).idx != undefined) {
this.initLeft = restAjax.params(window.location.href).idx
this.curContentId = restAjax.params(window.location.href).contentId
} else {
this.initLeft = ''
}
if (restAjax.params(window.location.href).departmentId) {
this.departmentId = restAjax.params(window.location.href).departmentId
}
this.getNav()
// this.getTopNav()
this.getGateNav()
this.getCount()
this.getWeahther()
this.getDate()
}
})
</script>
</body>
</html>