384 lines
20 KiB
HTML
384 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<base href="/bigdata/">
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bigdata/css/reset.css" />
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bigdata/css/moudle.css" />
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
|
<style>
|
|
*{margin:0;padding:0;}
|
|
[v-cloak]{display: none}
|
|
ul{list-style: none}
|
|
.container{width: 97%;margin:0 auto;}
|
|
.tab{margin-bottom: 10px;float: right;width: 74%;height:140px;overflow-y: auto}
|
|
.top:after, .tab:after, .list:after{content: '';display: block;clear: both}
|
|
.logo-box{float: left;width:25%;}
|
|
.logo{max-width: 100%;height:183px;}
|
|
.box h3{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 18px;font-weight: normal;color: #000;}
|
|
.list-box{float:left;width: 32%;margin-right: 2%;padding: 5px;box-sizing: border-box;border-radius: 5px}
|
|
.list-box:last-child{margin-right: 0}
|
|
.list-box h4{font-size: 16px;font-weight: normal;color: #000;}
|
|
.list-box ul li{height: 35px;color: #000;border-bottom: 1px solid #DDD;font-size: 0}
|
|
.list-box ul li a{display:inline-block;margin-right:5px;color: #000;text-decoration: none;font-size: 14px;line-height: 35px;vertical-align: top;}
|
|
.list-box ul li span{float:right;font-size: 14px;line-height: 35px;display: inline-block;max-width: 70%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: top;}
|
|
*{margin:0;padding:0}
|
|
.table-box{padding-right: 50px;position: relative}
|
|
.table-box table{table-layout: fixed;width:100%;border-collapse:collapse;border-spacing:0;}
|
|
.table-box table th{background: #eee;text-align: center;font-size: 16px;color: #000;height:35px;border: 1px solid #ddd;}
|
|
.table-box table td{text-align: center;font-size: 16px;color: #000;height:35px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border: 1px solid #ddd;}
|
|
.btn-box{position: absolute;top:0;right:0;width:50px;padding-top: 37px}
|
|
.btn{height:35px;text-align: center}
|
|
.btn button{background: #1879ff;border-radius: 5px;width:90%;color: #fff;outline: none;cursor: pointer;height:30px;border:none;margin-top:3px;}
|
|
|
|
.pager{width: 100%;margin: 10px auto 20px;padding-bottom: 20px;text-align: center;font-size: 0;background: #fff;}
|
|
.pager span{display: inline-block;padding: 0 15px;line-height: 25px;color: #676767;border: 1px solid #d2d2d2;font-size: 14px;margin: 0 5px;vertical-align: middle;cursor: pointer}
|
|
.pager ul{display: inline-block;overflow: hidden;vertical-align: middle}
|
|
.pager li{width: 45px;line-height: 25px;float: left;margin-right: 10px;border: 1px solid #d2d2d2;cursor: pointer;text-align: center;font-size: 14px;color: #676767;}
|
|
.pager li.active{background: #00c99c;color: #fff;border: 1px solid #00c99c}
|
|
.pager li:last-child{margin: 0}
|
|
.pager input{width: 50px;height: 25px;border: 1px solid #d2d2d2;text-align: center;vertical-align: middle}
|
|
.pager i{font-style: normal;color: #676767;font-size: 14px;line-height: 25px;display: inline-block;vertical-align: middle;margin: 0 5px}
|
|
.pager button{cursor: pointer;border: none;outline: none;background: #00c99c;width: 50px;height: 25px;vertical-align: middle;color: #fff;font-size: 14px}
|
|
|
|
.layui-card-body{padding: 0 15px;}
|
|
</style>
|
|
</head>
|
|
<body style="overflow: hidden;">
|
|
<div class="layui-card">
|
|
<div id="app">
|
|
<div class="container" style="padding-left: 15px;padding-right: 15px;padding-top: 15px;height: 655px;">
|
|
<div class="top">
|
|
<div class="logo-box">
|
|
<img :src="partyOrganizeData.logo" alt="" class="logo">
|
|
</div>
|
|
<div class="layui-col-md6" style="width: 739px;">
|
|
<div class="layui-card-body">
|
|
<div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;background-color: transparent">
|
|
<div style="background-color: transparent">
|
|
<ul class="layui-row layui-col-space10 layui-this" v-cloak>
|
|
<li class="layui-col-xs6" v-for="tab in tabList" style="width: 236px;">
|
|
<a href="javascript:void(0)" class="layadmin-backlog-body">
|
|
<!--<a @click="showPartyMemberList(tab.url, tab.count, tab.msgTitle);" href="javascript:void(0)" class="layadmin-backlog-body">-->
|
|
<h3>{{tab.title}}</h3>
|
|
<p><cite>{{tab.dataCount}}</cite></p>
|
|
</a>
|
|
</li>
|
|
<li class="layui-col-xs6" v-for="item in meeting" style="width: 236px;">
|
|
<a href="javascript:void(0)" class="layadmin-backlog-body">
|
|
<h3>{{item.categoryName}}</h3>
|
|
<p><cite>{{item.counts}}</cite></p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="clear: both"></div>
|
|
<div class="list" style="padding-left: 15px;padding-right: 15px;">
|
|
<div class="list-box" style="margin-top:30px;" v-cloak>
|
|
<h4>{{partyOrganizeData.name}}</h4>
|
|
<ul style="margin-top:10px;">
|
|
<li>
|
|
<a href="javascript:void(0);">组织类型</a>
|
|
<span>{{partyOrganizeData.typeDictionaryName}}</span>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);">直属类型</a>
|
|
<span>{{partyOrganizeData.belongTypeDictionaryName}}</span>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);">隶属类型</a>
|
|
<span>{{partyOrganizeData.subjectionTypeDictionaryName}}</span>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);">所属级别</a>
|
|
<span>{{partyOrganizeData.belongLevel}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="list-box" style="margin-top:61px;" v-cloak>
|
|
<ul>
|
|
<li>
|
|
<a href="javascript:void(0);">区域面积</a>
|
|
<span>{{partyOrganizeData.areaMeasure}}</span>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);">单位类型</a>
|
|
<span>{{partyOrganizeData.companyTypeName}}</span>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);">负责人</a>
|
|
<span>{{partyOrganizeData.linkMan}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="list-box" style="margin-top:61px;" v-cloak>
|
|
<ul>
|
|
<li>
|
|
<a href="javascript:void(0);">联系电话</a>
|
|
<span>{{partyOrganizeData.phone}}</span>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);">建立时间</a>
|
|
<span>{{partyOrganizeData.creatTime}}</span>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);">详细地址</a>
|
|
<span>{{partyOrganizeData.location}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="table-box" id="tableDiv" style="padding-left: 15px;padding-right: 15px;padding-top: 15px;" v-cloak>
|
|
<table style="table-layout: fixed;">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:50px">序号</th>
|
|
<th style="width:80px">组织名称</th>
|
|
<th style="width:80px">组织类型</th>
|
|
<th style="width:100px">直属类型</th>
|
|
<th style="width:80px">隶属类型</th>
|
|
<th style="width:80px">负责人</th>
|
|
<th style="width:80px">电话</th>
|
|
<th style="width:4%">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(list, index) in partyOrganizeList">
|
|
<td style="width:50px">{{(page.page-1) * page.rows + index + 1}}</td>
|
|
<td style="width:80px">{{list.name}}</td>
|
|
<td style="width:80px">{{list.typeDictionaryName}}</td>
|
|
<td style="width:100px">{{list.belongTypeDictionaryName}}</td>
|
|
<td style="width:80px">{{list.subjectionTypeDictionaryName}}</td>
|
|
<td style="width:80px">{{list.linkMan}}</td>
|
|
<td style="width:80px">{{list.phone}}</td>
|
|
<td style="width:4%">
|
|
<div class="btn">
|
|
<button @click="selectPartyOrganize(list.partyOrganizeId, list.belongLevel)">确认</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="pager" v-if="page.totalPage > 1" v-cloak>
|
|
<span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
|
|
<ul 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 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(page.totalPage - 5 + 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(page.page - (3 - cpage))">
|
|
{{page.page - (3 - cpage)}}
|
|
</li>
|
|
</ul>
|
|
<span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
|
|
</div>
|
|
<div class="layui-form-item layui-layout-admin">
|
|
<div class="layui-input-block">
|
|
<div class="layui-footer" style="left: 0;">
|
|
<button type="button" class="layui-btn" @click="submitFun">确定</button>
|
|
<button type="button" class="layui-btn layui-btn-primary close" @click="closeBox">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="assets/js/rem.js"></script>
|
|
<script type="text/javascript" src="assets/js/vue.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/echarts.js"></script>
|
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
|
<script src="assets/js/restajax.js"></script>
|
|
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
|
<script>
|
|
layui.config({
|
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'laytpl', 'restajax', 'datamessage', 'dialog'], function() {
|
|
var $ = layui.$;
|
|
var layer = layui.layer;
|
|
var laytpl = layui.laytpl;
|
|
window.dialog = layui.dialog;
|
|
window.restAjax = layui.restajax;
|
|
window.dataMessage = layui.datamessage;
|
|
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
computed: {
|
|
oWidth: function () {
|
|
return 100 / this.tabList.length + '%'
|
|
}
|
|
},
|
|
data: {
|
|
tabList: [],
|
|
partyOrganizeId: top.restAjax.params(window.location.href).partyOrganizeId,
|
|
belongLevel: top.restAjax.params(window.location.href).belongLevel,
|
|
partyOrganizeData: {
|
|
name: '', // 组织名称
|
|
logo: '', // 组织logo
|
|
typeDictionaryName: '', // 组织类型
|
|
belongTypeDictionaryName: '', // 直属类型
|
|
subjectionTypeDictionaryName: '', // 隶属类型
|
|
belongLevel: '', // 所属级别
|
|
areaMeasure: '', // 区域面积
|
|
companyTypeName: '', // 单位类型
|
|
linkMan: '', // 负责人
|
|
phone: '', // 联系电话
|
|
creatTime: '', // 建立事件
|
|
location: '' // 详细地址
|
|
}, // 党组织信息数据
|
|
partyMemberCount: 0, // 当前党组织中党员数量
|
|
partyOrganizeList: [],
|
|
page: {
|
|
page: 1,
|
|
rows: 2,
|
|
totalPage: 1
|
|
},
|
|
meeting: []
|
|
},
|
|
methods: {
|
|
paging: function (page) {
|
|
this.page.page = page
|
|
this.subPartyOrganizeList()
|
|
},
|
|
// 党组织信息
|
|
showPartyOrganize: function () {
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/partyorganize/listpagepartyorganize?partyOrganizeId=' + self.partyOrganizeId + '&bigData=yes', []), {}, null, function(code, data) {
|
|
self.partyOrganizeData = data.rows[0];
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
},
|
|
// 当前党组织中党员数量
|
|
getPartyMemberCount: function () {
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/partyorganize/countpartymember?partyOrganizeId=' + self.partyOrganizeId, []), {}, null, function(code, data) {
|
|
self.partyMemberCount = data.data;
|
|
self.tabList.unshift({
|
|
title: '党员数量',
|
|
dataCount: data.data,
|
|
msgTitle: '党员信息',
|
|
openTitle: '党员列表',
|
|
count: data.data,
|
|
url: 'route/partymemberorganize/view-partymemberorganize.html?partyOrganizeId=' + self.partyOrganizeId
|
|
});
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
},
|
|
// 当前党组织中党员数量
|
|
getMeetingCount: function () {
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/partyorganize/meetingcount?partyOrganizeId=' + self.partyOrganizeId, []), {}, null, function(code, data) {
|
|
self.meeting.push(data.data.meeting[0])
|
|
self.meeting.push(data.data.meeting[1])
|
|
self.meeting.push(data.data.meeting[2])
|
|
self.meeting.push(data.data.meeting[3])
|
|
self.meeting.push(data.data.meeting[4])
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
},
|
|
showPartyMemberList: function (url, count, msgTitle, openTitle) {
|
|
var self = this;
|
|
if (count <= 0) {
|
|
layer.msg('暂无' + msgTitle);
|
|
return false;
|
|
}
|
|
/*top.dialog.open({
|
|
url: top.restAjax.path(url, []),
|
|
title: openTitle,
|
|
width: '1080px',
|
|
height: '98%',
|
|
onClose: function(data) {
|
|
|
|
}
|
|
});*/
|
|
},
|
|
// 党组织列表（下级）
|
|
subPartyOrganizeList: function () {
|
|
var self = this;
|
|
$('#tableDiv').hide();
|
|
var newLevel = parseInt(self.belongLevel) + 1;
|
|
if (newLevel <= 5) {
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/partyorganize/listpagepartyorganize?belongLevel=' + newLevel + '&bigData=yes', []), {page: self.page.page, rows: self.page.rows}, null, function(code, data) {
|
|
if(data && data.rows.length > 0) {
|
|
$('#tableDiv').show();
|
|
self.partyOrganizeList = data.rows;
|
|
self.page.page = data.page;
|
|
self.page.totalPage = data.total;
|
|
self.page.totalPage = Math.ceil(data.total / self.page.rows)
|
|
}else {
|
|
$('#tableDiv').hide();
|
|
}
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
}
|
|
|
|
},
|
|
selectPartyOrganize: function (id, belongLevel) {
|
|
var self = this;
|
|
top.dialog.dialogData.partyOrganizeId = id;
|
|
top.dialog.dialogData.belongLevel = belongLevel;
|
|
self.closeBox();
|
|
},
|
|
submitFun: function() {
|
|
var self = this;
|
|
top.dialog.dialogData.partyOrganizeId = self.partyOrganizeId;
|
|
self.closeBox();
|
|
},
|
|
closeBox: function() {
|
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
|
}
|
|
},
|
|
mounted: function () {
|
|
var self = this;
|
|
self.showPartyOrganize();
|
|
self.getPartyMemberCount();
|
|
self.subPartyOrganizeList();
|
|
self.getMeetingCount();
|
|
}
|
|
})
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|