200 lines
10 KiB
HTML
200 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<base href="/partybuilding/">
|
|
<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" 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:205px;}
|
|
.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;}</style>
|
|
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vue.min.js"></script>
|
|
</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="'route/file/downloadfile/false/' + partyOrganizeData.logo" alt="" class="logo">
|
|
</div>
|
|
<div class="layui-col-md6" style="width: 739px;">
|
|
<div class="layui-card" style="background-color: transparent">
|
|
<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 @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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list" style="padding-left: 15px;padding-right: 15px;">
|
|
<div class="list-box" style="margin-top:30px;">
|
|
<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;">
|
|
<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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
computed: {
|
|
oWidth: function () {
|
|
return 100 / this.tabList.length + '%'
|
|
}
|
|
},
|
|
data: {
|
|
tabList: [],
|
|
partyOrganizeId: top.restAjax.params(window.location.href).partyOrganizeId,
|
|
partyOrganizeData: {
|
|
name: '', // 组织名称
|
|
logo: '', // 组织logo
|
|
typeDictionaryName: '', // 组织类型
|
|
belongTypeDictionaryName: '', // 直属类型
|
|
subjectionTypeDictionaryName: '', // 隶属类型
|
|
belongLevel: '', // 所属级别
|
|
areaMeasure: '', // 区域面积
|
|
companyTypeName: '', // 单位类型
|
|
linkMan: '', // 负责人
|
|
phone: '', // 联系电话
|
|
creatTime: '', // 建立事件
|
|
location: '' // 详细地址
|
|
}, // 党组织信息数据
|
|
partyMemberCount: 0, // 当前党组织中党员数量
|
|
},
|
|
methods: {
|
|
// 党组织信息
|
|
showPartyOrganize: function() {
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/partyorganize/listpagepartyorganize?partyOrganizeId={partyOrganizeId}', [self.partyOrganizeId]), {}, null, function(code, data) {
|
|
self.partyOrganizeData = data.rows[0];
|
|
console.log(self.partyOrganizeData)
|
|
}, 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={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);
|
|
});
|
|
},
|
|
showPartyMemberList: function (url, count, msgTitle, openTitle) {
|
|
var self = this;
|
|
if(count <= 0) {
|
|
top.dialog.msg('暂无' + msgTitle);
|
|
return false;
|
|
}
|
|
top.dialog.open({
|
|
url: top.restAjax.path(url, []),
|
|
title: openTitle,
|
|
width: '1040px',
|
|
height: '98%',
|
|
onClose: function(data) {
|
|
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mounted: function () {
|
|
var self = this;
|
|
self.showPartyOrganize();
|
|
self.getPartyMemberCount();
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|