@@ -71,13 +71,22 @@ public class RwkMeetingController extends BaseController | |||||
return prefix + "/meetingView"; | return prefix + "/meetingView"; | ||||
} | } | ||||
/** | |||||
* 人员选择 | |||||
*/ | |||||
@GetMapping("/userSelect") | |||||
public String userSelect(ModelMap mmap) | |||||
{ | |||||
getJoinPeople(mmap); | |||||
return prefix + "/userSelect"; | |||||
} | |||||
/** | /** | ||||
* 新增教育培训 | * 新增教育培训 | ||||
*/ | */ | ||||
@GetMapping("/add") | @GetMapping("/add") | ||||
public String add(ModelMap mmap) | public String add(ModelMap mmap) | ||||
{ | { | ||||
getJoinPeople(mmap); | |||||
return prefix + "/add"; | return prefix + "/add"; | ||||
} | } | ||||
@@ -104,7 +113,6 @@ public class RwkMeetingController extends BaseController | |||||
{ | { | ||||
RwkMeeting rwkMeeting = rwkMeetingService.selectRwkMeetingById(id); | RwkMeeting rwkMeeting = rwkMeetingService.selectRwkMeetingById(id); | ||||
mmap.put("rwkMeeting", rwkMeeting); | mmap.put("rwkMeeting", rwkMeeting); | ||||
getJoinPeople(mmap); | |||||
return prefix + "/edit"; | return prefix + "/edit"; | ||||
} | } | ||||
@@ -284,3 +284,8 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} | |||||
.layui-layer-gray .layui-layer-btn a {background: #fff; border-color: #e9e7e7; color: #333} | .layui-layer-gray .layui-layer-btn a {background: #fff; border-color: #e9e7e7; color: #333} | ||||
.layui-layer-gray .layui-layer-btn .layui-layer-btn1 {background: #c9c5c5} | .layui-layer-gray .layui-layer-btn .layui-layer-btn1 {background: #c9c5c5} | ||||
.layui-layer-tab .layui-layer-content {width: 100%} | .layui-layer-tab .layui-layer-content {width: 100%} | ||||
.layui-layer-blue[type=dialog] {min-width: 280px} | |||||
.layui-layer-blue .layui-layer-title {background: #f8f8f8; color: #333; border: 0} | |||||
.layui-layer-blue .layui-layer-btn {padding: 5px 10px 10px; text-align: right; border-top: 1px solid #e9e7e7} | |||||
.layui-layer-blue .layui-layer-btn a {background: #3376E1; border-color: #e9e7e7; color: #ffffff;padding: 3px 16px;height: auto;border-radius: 4px;} | |||||
.layui-layer-blue .layui-layer-btn .layui-layer-btn1 {background: #ffffff;color: #000000} |
@@ -79,6 +79,12 @@ body .layer-ext-moon .layui-layer-setwin .layui-layer-close1,body .layer-ext-moo | |||||
body .layer-ext-moon .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover, body .layui-layer-tab .layui-layer-setwin .layui-layer-close1:hover,body .layui-layer-tab .layui-layer-setwin .layui-layer-close2:hover { | body .layer-ext-moon .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover, body .layui-layer-tab .layui-layer-setwin .layui-layer-close1:hover,body .layui-layer-tab .layui-layer-setwin .layui-layer-close2:hover { | ||||
background: url(default.png) -48px 0; | background: url(default.png) -48px 0; | ||||
} | } | ||||
.layui-layer-blue .layui-layer-setwin .layui-layer-close1,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2, body .layui-layer-tab .layui-layer-setwin .layui-layer-close1,body .layui-layer-tab .layui-layer-setwin .layui-layer-close2 { | |||||
background: url(default.png) 0 0; | |||||
} | |||||
.layui-layer-blue .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover, body .layui-layer-tab .layui-layer-setwin .layui-layer-close1:hover,body .layui-layer-tab .layui-layer-setwin .layui-layer-close2:hover { | |||||
background: url(default.png) -48px 0; | |||||
} | |||||
body .layer-ext-moon .layui-layer-padding{padding-top: 24px;} | body .layer-ext-moon .layui-layer-padding{padding-top: 24px;} | ||||
body .layer-ext-moon .layui-layer-btn { | body .layer-ext-moon .layui-layer-btn { | ||||
text-align: right; | text-align: right; | ||||
@@ -22,7 +22,7 @@ body, html { | |||||
} | } | ||||
.box { | .box { | ||||
background-color: #FFF; | background-color: #FFF; | ||||
border-radius: 9px; | |||||
border-radius: 5px; | |||||
box-shadow: 0 0 5px 2px rgba(0, 0, 255, 0.05); | box-shadow: 0 0 5px 2px rgba(0, 0, 255, 0.05); | ||||
padding: 10px; | padding: 10px; | ||||
margin: 10px; | margin: 10px; | ||||
@@ -30,31 +30,31 @@ body, html { | |||||
.arrange{ | .arrange{ | ||||
display: flex; | display: flex; | ||||
height: 100px; | height: 100px; | ||||
border-radius: 5px; | |||||
border-radius: 20px; | |||||
align-items: center; | align-items: center; | ||||
margin: 0 10px; | margin: 0 10px; | ||||
} | } | ||||
.div1{ | |||||
.arrange.div1{ | |||||
color: #ffffff; | color: #ffffff; | ||||
flex-direction: column; | flex-direction: column; | ||||
justify-content: center; | justify-content: center; | ||||
width: calc(30% - 20px); | width: calc(30% - 20px); | ||||
background-color: #28619C; | |||||
background: url('../img/main/bgColor1.png') center/cover no-repeat; | |||||
} | } | ||||
.div2{ | |||||
.arrange.div2{ | |||||
width: calc(34% - 20px); | width: calc(34% - 20px); | ||||
padding-left: 20px; | |||||
background-color: #FFF7F2; | |||||
padding-left: 85px; | |||||
background: url('../img/main/bgColor2.png') center/cover no-repeat; | |||||
} | } | ||||
.div3{ | |||||
.arrange.div3{ | |||||
width: calc(36% - 20px); | width: calc(36% - 20px); | ||||
padding-left: 20px; | |||||
background-color: #E9F2FD; | |||||
padding-left: 85px; | |||||
background: url('../img/main/bgColor3.png') center/cover no-repeat; | |||||
} | } | ||||
.cut{ | .cut{ | ||||
color: #000000; | |||||
color: #9C9C9C; | |||||
background-color: #F7F7F7; | background-color: #F7F7F7; | ||||
padding: 5px 10px 5px 10px; | |||||
padding: 3px 10px 3px 10px; | |||||
border: 1px solid #E2E2E2; | border: 1px solid #E2E2E2; | ||||
} | } | ||||
.cut:first-child{ | .cut:first-child{ | ||||
@@ -262,4 +262,29 @@ body, html { | |||||
white-space: nowrap; | white-space: nowrap; | ||||
overflow: hidden; | overflow: hidden; | ||||
text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
} | |||||
.item { | |||||
display: flex; | |||||
align-items: center; | |||||
padding: 10px; | |||||
} | |||||
.left-content { | |||||
width: 75%; | |||||
white-space: nowrap; | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
} | |||||
.right-time { | |||||
width: 25%; | |||||
text-align: center; | |||||
color: #999; | |||||
} | |||||
.ball{ | |||||
display: inline-block; | |||||
width: 10px; | |||||
height: 10px; | |||||
border-radius: 50%; | |||||
background-color: #CCCCCC; | |||||
margin-left: 10px; | |||||
margin-right: 10px; | |||||
} | } |
@@ -104,8 +104,8 @@ | |||||
#table-show tr td{ | #table-show tr td{ | ||||
border: none; | border: none; | ||||
} | } | ||||
.width-30{ | |||||
width: 30%; | |||||
.width-40{ | |||||
width: 40%; | |||||
font-size: 18px; | font-size: 18px; | ||||
color: #0042a4; | color: #0042a4; | ||||
} | } | ||||
@@ -1,80 +1,56 @@ | |||||
.tr-meeting tr{ | |||||
border: 1px solid #CCCCCC; | |||||
border-radius: 10px; | |||||
height: 170px; | |||||
.daj_right { | |||||
margin-left: 92px; | |||||
width: 60%; | |||||
} | } | ||||
.meeting-introdution { | |||||
height: 32%!important; | |||||
width: 100%; | |||||
.daj_left_two{ | |||||
width: calc(14% + 1px); | |||||
text-align: left!important; | |||||
} | } | ||||
.meeting-content{ | |||||
height: 100%; | |||||
.daj_right_two { | |||||
width: 80%; | |||||
margin-left: 40px; | |||||
} | } | ||||
.div-display{ | |||||
display: inline-block; | |||||
.form-horizontal .col-md-6{ | |||||
padding: 0; | |||||
} | } | ||||
.inline-meeting-div{ | |||||
display: inline-block; | |||||
/*margin-top: -20px;*/ | |||||
.specialSign{ | |||||
top: 3px; | |||||
margin-right: 3px; | |||||
} | } | ||||
.meeting-pieChart1{ | |||||
height:40%; | |||||
width: 30%; | |||||
margin-top: 50px; | |||||
.userTable{ | |||||
width:100%; | |||||
border-collapse: collapse; | |||||
border: 1px solid #d7dff2; | |||||
} | } | ||||
.pieChart1{ | |||||
height:100%; | |||||
width: 100%; | |||||
.userTable th{ | |||||
font-size: 20px; | |||||
font-weight: normal; | |||||
} | } | ||||
.meeting-add-input{ | |||||
border: 0px; | |||||
outline: none; | |||||
.userTable th,.userTable td{ | |||||
border-bottom: 1px solid #d7dff2; | |||||
padding: 5px; | |||||
text-align: center; | |||||
} | } | ||||
.meeting-add-header{ | |||||
height: 40px; | |||||
width: 100%; | |||||
font-size: 25px; | |||||
.progress{ | |||||
height: 20px; | |||||
overflow: hidden; | |||||
background-color: #f5f5f5; | |||||
border-radius: 0; | |||||
} | } | ||||
.meeting-add-content { | |||||
width: 98%; | |||||
height: 200px; | |||||
font-size: 18px; | |||||
font-family: 仿宋; | |||||
resize: none; | |||||
border: none; | |||||
outline: none; | |||||
.progress-bar{ | |||||
font-size: 16px; | |||||
} | } | ||||
.meeting-add-introdution { | |||||
height: 40%!important; | |||||
width: 100%; | |||||
.progress-bar-success{ | |||||
text-align: right; | |||||
border-radius: 0 10px 10px 0; | |||||
background: linear-gradient(to right, #66ffff, #4661FF); | |||||
} | } | ||||
.meeting-add-font{ | |||||
font-size: 18px; | |||||
font-family: 仿宋; | |||||
.progress-bar-success span{ | |||||
margin-right: 4px; | |||||
} | } | ||||
.meeting-btn-add{ | |||||
font-size: 20px; | |||||
height: 40px; | |||||
text-align: center!important; | |||||
align-content: center; | |||||
.signNormal{ | |||||
color: #00B83F; | |||||
} | } | ||||
.meeting-add-files{ | |||||
/*border: 1px solid #5897fb;*/ | |||||
height: 173px; | |||||
width: 100%; | |||||
} | |||||
.meeting-edit-files{ | |||||
/*border: 1px solid #5897fb;*/ | |||||
height: 173px; | |||||
width: 35%; | |||||
margin-left: 20px; | |||||
} | |||||
.meeting-table tr td{ | |||||
border: 1px solid black; | |||||
} | |||||
.meeting-table tr{ | |||||
width: 100%; | |||||
.signFail{ | |||||
color: #a94442; | |||||
} | } |
@@ -17,37 +17,38 @@ | |||||
<div class="travel" style="height: 68%;"> | <div class="travel" style="height: 68%;"> | ||||
<div style="width: 30%;"> | <div style="width: 30%;"> | ||||
<div class="wddbrw_head"> | <div class="wddbrw_head"> | ||||
<h1>知联会职务</h1> | |||||
<h1>知联会职务情况</h1> | |||||
</div> | </div> | ||||
<div class="box" style="height: calc(50% - 60px);"> | <div class="box" style="height: calc(50% - 60px);"> | ||||
<div id="pieChart1" style="width: 100%; height: 100%;"></div> | <div id="pieChart1" style="width: 100%; height: 100%;"></div> | ||||
</div> | </div> | ||||
<div class="wddbrw_head" style="margin-top: 20px;margin-bottom: 10px;"> | <div class="wddbrw_head" style="margin-top: 20px;margin-bottom: 10px;"> | ||||
<h1>政治面貌情况</h1> | |||||
<h1>数据分析</h1> | |||||
</div> | </div> | ||||
<div class="box" style="height: calc(50% - 60px);display: flex;margin: 0 10px;"> | <div class="box" style="height: calc(50% - 60px);display: flex;margin: 0 10px;"> | ||||
<div id="pieChart2" style="width: 50%; height: 100%;"></div> | |||||
<div id="plotChart3" style="width:50%; height: 100%;"></div> | |||||
<div id="pieChart2" style="width: 100%; height: 100%;"></div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div style="width: 40%;"> | |||||
<div style="width: 40%;margin-left: 5px;margin-right: 5px;"> | |||||
<div style="width:100%;display: flex;"> | <div style="width:100%;display: flex;"> | ||||
<div class="arrange div1"> | <div class="arrange div1"> | ||||
<div style="margin-top: 10px;">知联会干部在库数</div> | |||||
<div style="margin-top: 10px;">同年教育培训次数</div> | |||||
<div style="font-size: 26px;font-style: italic;margin-top: 6px;">5321</div> | <div style="font-size: 26px;font-style: italic;margin-top: 6px;">5321</div> | ||||
</div> | </div> | ||||
<div class="arrange div2"> | <div class="arrange div2"> | ||||
<div><img style="width: 40px;height: 40px;" src="/img/main/presidentOne.png"/></div> | |||||
<div style="margin-left: 20px;"> | |||||
<div>会长</div> | |||||
<div><span style="font-size: 24px;font-style: italic;margin-right: 10px;color: #FF620D;">1</span>人</div> | |||||
<div> | |||||
<div>平均参会率</div> | |||||
<div style="font-size: 10px;"> | |||||
<span style="font-size: 24px;font-style: italic;margin-right: 10px;color: #FF620D;">95</span>% | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="arrange div3"> | <div class="arrange div3"> | ||||
<div><img style="width: 40px;height: 40px;" src="/img/main/presidentTwo.png"/></div> | |||||
<div style="margin-left: 20px;"> | |||||
<div>副会长</div> | |||||
<div><span style="font-size: 24px;font-style: italic;margin-right: 10px;color: #016BFF;">5</span>人</div> | |||||
<div> | |||||
<div>未参会率</div> | |||||
<div style="font-size: 10px;"> | |||||
<span style="font-size: 24px;font-style: italic;margin-right: 10px;color: #016BFF;">5</span>% | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -55,42 +56,58 @@ | |||||
<h1>近期培训活动</h1> | <h1>近期培训活动</h1> | ||||
</div> | </div> | ||||
<div class="box" style="height: calc(100% - 180px);display: flex;margin: 0 10px;"> | <div class="box" style="height: calc(100% - 180px);display: flex;margin: 0 10px;"> | ||||
<div style="width:98%;display: flex;height: 100%"> | |||||
<table style="width: 100%;font-size: 18px"> | |||||
<tr style="width: 100%"> | |||||
<td style="width: 70%;text-align: left">***************************活动</td> | |||||
<td style="width: 20%;text-align: right"> 2024-01-09</td> | |||||
</tr> | |||||
<tr style="width: 100%"> | |||||
<td style="width: 70%;text-align: left">***************************活动</td> | |||||
<td style="width: 20%;text-align: right"> 2024-01-09</td> | |||||
</tr> | |||||
<tr style="width: 100%"> | |||||
<td style="width: 70%;text-align: left">***************************活动</td> | |||||
<td style="width: 20%;text-align: right"> 2024-01-09</td> | |||||
</tr> | |||||
<tr style="width: 100%"> | |||||
<td style="width: 70%;text-align: left">***************************活动</td> | |||||
<td style="width: 20%;text-align: right"> 2024-01-09</td> | |||||
</tr> | |||||
<tr style="width: 100%"> | |||||
<td style="width: 70%;text-align: left">***************************活动</td> | |||||
<td style="width: 20%;text-align: right"> 2024-01-09</td> | |||||
</tr> | |||||
<tr style="width: 100%"> | |||||
<td style="width: 70%;text-align: left">***************************活动</td> | |||||
<td style="width: 20%;text-align: right"> 2024-01-09</td> | |||||
</tr> | |||||
<tr style="width: 100%"> | |||||
<td style="width: 70%;text-align: left">***************************活动</td> | |||||
<td style="width: 20%;text-align: right"> 2024-01-09</td> | |||||
</tr> | |||||
</table> | |||||
<div style="width:100%;height: 100%;overflow: hidden;"> | |||||
<div class="item"> | |||||
<div class="left-content"> | |||||
<span class="ball"></span> | |||||
这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试 | |||||
</div> | |||||
<div class="right-time">2024-12-10</div> | |||||
</div> | |||||
<div class="item"> | |||||
<div class="left-content"> | |||||
<span class="ball"></span> | |||||
这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试 | |||||
</div> | |||||
<div class="right-time">2024-12-10</div> | |||||
</div> | |||||
<div class="item"> | |||||
<div class="left-content"> | |||||
<span class="ball"></span> | |||||
这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试 | |||||
</div> | |||||
<div class="right-time">2024-12-10</div> | |||||
</div> | |||||
<div class="item"> | |||||
<div class="left-content"> | |||||
<span class="ball"></span> | |||||
这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试 | |||||
</div> | |||||
<div class="right-time">2024-12-10</div> | |||||
</div> | |||||
<div class="item"> | |||||
<div class="left-content"> | |||||
<span class="ball"></span> | |||||
这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试 | |||||
</div> | |||||
<div class="right-time">2024-12-10</div> | |||||
</div> | |||||
<div class="item"> | |||||
<div class="left-content"> | |||||
<span class="ball"></span> | |||||
这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试 | |||||
</div> | |||||
<div class="right-time">2024-12-10</div> | |||||
</div> | |||||
<div class="item"> | |||||
<div class="left-content"> | |||||
<span class="ball"></span> | |||||
这两位“七一勋章”获得者在市委中心组在市委中心组市委中心组测试测试测试测试测试测试测试 | |||||
</div> | |||||
<div class="right-time">2024-12-10</div> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div style="width: 30%;"> | <div style="width: 30%;"> | ||||
<div class="wddbrw_head"> | <div class="wddbrw_head"> | ||||
@@ -115,7 +132,7 @@ | |||||
<div id="barChart1" style="width: 100%; height: 100%;"></div> | <div id="barChart1" style="width: 100%; height: 100%;"></div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div style="width: 70%;"> | |||||
<div style="width: 70%;margin-left: 5px;"> | |||||
<div class="wddbrw_head"> | <div class="wddbrw_head"> | ||||
<h1>单位类别情况</h1> | <h1>单位类别情况</h1> | ||||
</div> | </div> | ||||
@@ -149,26 +166,39 @@ | |||||
// console.log(result); | // console.log(result); | ||||
// } | // } | ||||
// }); | // }); | ||||
var color = ['#105DA5', '#D1E3F2','#578DC0','#67ACD4']; | |||||
var color1 = ['#FFAC74', '#5FCBF2','#FF8ED0','#9786FF']; | |||||
var array1 = [ | var array1 = [ | ||||
{name:'正局级XX人',value:235}, {name:'副局级XX人',value:274}, | {name:'正局级XX人',value:235}, {name:'副局级XX人',value:274}, | ||||
{name:'正处级XX人',value:310}, {name:'正科级XX人',value:335} | {name:'正处级XX人',value:310}, {name:'正科级XX人',value:335} | ||||
]; | ]; | ||||
var grid = {left: '10%', right: '6%', bottom: '3%', top:'6%'} | var grid = {left: '10%', right: '6%', bottom: '3%', top:'6%'} | ||||
array1.some(function (item,index){ | |||||
item.itemStyle = { | |||||
color: color[index] | |||||
} | |||||
}) | |||||
//饼图1 | //饼图1 | ||||
pieChartMethod('pieChart1',array1,"职务层次情况",'80%',"",grid,"",true); | pieChartMethod('pieChart1',array1,"职务层次情况",'80%',"",grid,"",true); | ||||
array1 = [ | array1 = [ | ||||
{name:'民革',value:20}, {name:'无党派',value:20},{name:'群众',value:20}, | |||||
{name:'台盟',value:20}, {name:'致公党',value:20},{name:'九三学社',value:20}, | |||||
{name:'农工党',value:20}, {name:'民进',value:20},{name:'民建',value:20}, {name:'民盟',value:20} | |||||
{name:'数据1',value:1200}, {name:'数据2',value:600},{name:'数据3',value:800}, {name:'数据4',value:1000}, | |||||
]; | ]; | ||||
//对比例进行单独处理 | |||||
handleAccount(array1); | |||||
//饼图2 | //饼图2 | ||||
pieChartMethod('pieChart2',array1,"政治面貌",['45%', '75%'],"",grid,"",true); | |||||
//阶梯图 | |||||
var data = [ | |||||
{ value: 8, name: '副部级' }, { value: 23, name: '正局级' }, { value: 100, name: '副局级' }, | |||||
{ value: 699, name: '正处级' }, { value: 1640, name: '副处级' } | |||||
] | |||||
funnelPlot('plotChart3',data); | |||||
var legend = { | |||||
orient: 'vertical', right: '10%', bottom: "15%", icon: 'circle', formatter: function(name) { | |||||
var obj = array1.find(item => item.name === name); | |||||
return `数据统计:{name|${name}}{value|${obj.value}件}{account|${obj.account}}%`; | |||||
}, | |||||
textStyle: {rich: {name: {padding: [0, 10, 0, 0]},value:{width: 50}}} | |||||
} | |||||
array1.some(function (item,index){ | |||||
item.itemStyle = { | |||||
color: color1[index] | |||||
} | |||||
}) | |||||
pieChartMethod('pieChart2',array1,"数据分析",['45%', '75%'],['25%', '50%'],grid,legend,false,""); | |||||
//柱状图 | //柱状图 | ||||
var yAxis = { | var yAxis = { | ||||
type: 'category', | type: 'category', | ||||
@@ -180,29 +210,22 @@ | |||||
name: '男', | name: '男', | ||||
type: 'bar', | type: 'bar', | ||||
data: [123, 76, 66, 21], | data: [123, 76, 66, 21], | ||||
emphasis: { | |||||
focus: 'series' | |||||
}, | |||||
label: { | |||||
show: true, | |||||
position: 'right' | |||||
} | |||||
emphasis: {focus: 'series'}, | |||||
itemStyle: {normal: {color: '#105DA5'}}, | |||||
label: {show: true, position: 'right'} | |||||
}, { | }, { | ||||
name: '女', | name: '女', | ||||
type: 'bar', | type: 'bar', | ||||
data: [95, 91, 73, 29], | data: [95, 91, 73, 29], | ||||
emphasis: { | |||||
focus: 'series' | |||||
}, label: { | |||||
show: true, | |||||
position: 'right' | |||||
} | |||||
emphasis: {focus: 'series'}, | |||||
itemStyle: {normal: {color: '#D1E3F2'}}, | |||||
label: {show: true, position: 'right'} | |||||
}] | }] | ||||
//柱状图1 | //柱状图1 | ||||
var grid1 = {left: '15%', right: '6%', bottom: '1%', top:'13%'}; | var grid1 = {left: '15%', right: '6%', bottom: '1%', top:'13%'}; | ||||
barChartMethod("barChart1",{trigger: 'axis'},{data: ['男', '女'],left: '3%',},{type: 'value', | barChartMethod("barChart1",{trigger: 'axis'},{data: ['男', '女'],left: '3%',},{type: 'value', | ||||
axisLine: {show: false,},axisLabel: {show: false,}, axisTick: {show: false,},splitLine: {show: false}},yAxis,grid1,series); | axisLine: {show: false,},axisLabel: {show: false,}, axisTick: {show: false,},splitLine: {show: false}},yAxis,grid1,series); | ||||
grid1 = {left: '15%', right: '6%', bottom: '12%', top:'4%'}; | |||||
grid1 = {left: '15%', right: '6%', bottom: '12%', top:'6%'}; | |||||
series = [{ | series = [{ | ||||
name: '数据', | name: '数据', | ||||
type: 'bar', | type: 'bar', | ||||
@@ -210,7 +233,7 @@ | |||||
itemStyle: { | itemStyle: { | ||||
normal: { | normal: { | ||||
color: function(params) { | color: function(params) { | ||||
var colors = ['#34b3a0', '#ff6347']; | |||||
var colors = ['#105DA5', '#D1E3F2']; | |||||
return colors[params.dataIndex % 2]; | return colors[params.dataIndex % 2]; | ||||
} | } | ||||
} | } | ||||
@@ -229,44 +252,97 @@ | |||||
array1 = [ | array1 = [ | ||||
{name:'博士',value:2}, {name:'硕士',value:3},{name:'学士',value:5}, {name:'其他',value:1} | {name:'博士',value:2}, {name:'硕士',value:3},{name:'学士',value:5}, {name:'其他',value:1} | ||||
]; | ]; | ||||
array1.some(function (item,index){ | |||||
item.itemStyle = { | |||||
color: color[index] | |||||
} | |||||
}); | |||||
pieChartMethod('pieChart3',array1,"学位情况",'80%',"",grid,"",true,itemStyle); | pieChartMethod('pieChart3',array1,"学位情况",'80%',"",grid,"",true,itemStyle); | ||||
//柱状图3 | //柱状图3 | ||||
var data1 = [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130]; | |||||
var maxHeight = Math.max(...data1); | |||||
var data1 = [ | |||||
{name:'行政机关',value:120}, | |||||
{name:'人大机关',value:200}, | |||||
{name:'政协机关',value:150}, | |||||
{name:'民主党派机关',value:80}, | |||||
{name:'司法机关',value:70}, | |||||
{name:'高校',value:110}, | |||||
{name:'科研院所',value:130}, | |||||
{name:'其他事业单位',value:120}, | |||||
{name:'群团组织',value:40}, | |||||
{name:'在沪央企',value:30}, | |||||
{name:'地方国企',value:20}, | |||||
{name:'中央在沪',value:10}, | |||||
{name:'部队',value:5} | |||||
]; | |||||
var names = data1.map(item => item.name); | |||||
var mainType = ['行政机关', '人大机关', '政协机关','民主党派机关', '司法机关','高校','科研院所','其他事业单位']; | |||||
var otherType = ['群团组织', '在沪央企', '地方国企','中央在沪', '部队']; | |||||
var barColor = ['#205ACF','#1890FF','#2FAB34','#E44C4C','#FFAB18']; | |||||
var xAxis = { | var xAxis = { | ||||
type: 'category', data: ['行政机关', '人大机关', '政协机关', '民主党派机关', '司法机关', '高校', '科研院所','其他事业单位','群团组织','在沪央企','地方国企','中央在沪单位','部队','其他'], | |||||
axisTick: {show: false,}, | |||||
axisLabel: { | |||||
interval: 0 // 强制显示所有标签 | |||||
} | |||||
type: 'category', data: mainType.concat(['其他']), | |||||
axisTick: {show: false,} | |||||
} | } | ||||
yAxis = { | yAxis = { | ||||
type: 'value', | type: 'value', | ||||
axisLine: {show: false,}, axisTick: {show: false,},splitLine: {show: false} | |||||
} | |||||
var series1 = [{ | |||||
name: '灰色背景', | |||||
type: 'bar', | |||||
data: data1.map(value => maxHeight), // 使用最大高度填充 | |||||
itemStyle: { | |||||
color: '#ccc', // 灰色 | |||||
opacity: 0.5 // 可选:使灰色柱子稍微透明 | |||||
name:"单位:个", | |||||
nameLocation: 'end', | |||||
nameTextStyle: { | |||||
padding: [0, 0, 0, -30] | |||||
}, | }, | ||||
barGap: '-100%', // 使灰色柱子与实际数据柱子重叠 | |||||
tooltip: { | |||||
show: false //禁用灰色柱子的 tooltip | |||||
axisTick: { inside: true,alignWithLabel: true},splitLine: {lineStyle: {type: 'dashed'}} | |||||
} | |||||
var series1 = names.map((name, index) => { | |||||
var valueArray = [0,0,0,0,0,0,0,0,0]; | |||||
if (mainType.includes(name)){ | |||||
valueArray[index] = (data1.filter(item => item.name == name))[0].value; | |||||
return { | |||||
name, | |||||
type: 'bar', | |||||
stack: 'total', | |||||
barWidth: 50, | |||||
data: valueArray, | |||||
itemStyle: { | |||||
color: '#1890FF' | |||||
} | |||||
}; | |||||
}else { | |||||
valueArray[valueArray.length - 1] = (data1.filter(item => item.name == name))[0].value; | |||||
return { | |||||
name, | |||||
type: 'bar', | |||||
stack: 'total', | |||||
barWidth: 30, | |||||
emphasis: {focus: 'series'}, | |||||
data: valueArray, | |||||
itemStyle: { | |||||
color: barColor[otherType.indexOf(name)] | |||||
} | |||||
} | |||||
} | |||||
}); | |||||
var tooltip = { | |||||
trigger: 'axis', | |||||
backgroundColor: '#ffffff', | |||||
textStyle: { | |||||
color: 'black' | |||||
}, | }, | ||||
silent: true //禁用柱子的悬停和点击事件 | |||||
}, { | |||||
name: '单位类别', | |||||
type: 'bar', | |||||
data: data1, | |||||
itemStyle: { | |||||
color: '#73C9C8' // 实际数据的颜色 | |||||
borderColor: '#F5F5F5', | |||||
borderWidth: 1, | |||||
extraCssText: 'box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);', | |||||
axisPointer: {type: 'none'}, | |||||
formatter: function (params) { | |||||
var tooltipContent = `${params[0].name}<br/>`; | |||||
params.forEach(param => { | |||||
if (param.value >0){ | |||||
tooltipContent += `<span style="display: inline-block; width: 10px; height: 10px; background-color: ${param.color};border-radius: 50%;margin-right: 5px;"></span> | |||||
${param.seriesName}: ${param.value}<br/>`; | |||||
} | |||||
}) | |||||
return tooltipContent; | |||||
} | } | ||||
}]; | |||||
var grid3 = {left: '5%', right: '2%', bottom: '13%', top:'6%'} | |||||
barChartMethod("barChart3","","",xAxis,yAxis,grid3,series1); | |||||
} | |||||
var grid3 = {left: '5%', right: '2%', bottom: '13%', top:'18%'}; | |||||
barChartMethod("barChart3",tooltip,"",xAxis,yAxis,grid3,series1); | |||||
} | } | ||||
//饼图-id-数据-名称-弧度-位置-grid-legend-是否需要线 | //饼图-id-数据-名称-弧度-位置-grid-legend-是否需要线 | ||||
@@ -281,9 +357,15 @@ | |||||
name: name, | name: name, | ||||
type: 'pie', | type: 'pie', | ||||
data: array, | data: array, | ||||
label:{ | |||||
color:'#000000' | |||||
}, | |||||
labelLine: { | labelLine: { | ||||
length: 8, | |||||
length2: 4 | |||||
length: 6, | |||||
length2: 4, | |||||
lineStyle: { | |||||
color: '#DDDDDD' | |||||
} | |||||
}, | }, | ||||
emphasis: { | emphasis: { | ||||
itemStyle: { | itemStyle: { | ||||
@@ -305,64 +387,10 @@ | |||||
pieChart.setOption(pieOption); | pieChart.setOption(pieOption); | ||||
} | } | ||||
//漏斗图 | |||||
function funnelPlot(id,data){ | |||||
var myChart = echarts.init(document.getElementById(id)); | |||||
var changeData = handleData(data); | |||||
var option = { | |||||
// tooltip: { | |||||
// trigger: 'item', | |||||
// formatter: function(params) { | |||||
// return params.name + ': ' + data[params.dataIndex].value; | |||||
// } | |||||
// }, | |||||
series: [{ | |||||
type: 'funnel', | |||||
left: '5%', | |||||
top: 10, | |||||
bottom: 10, | |||||
width: '90%', | |||||
min: 0, | |||||
max: 10, | |||||
minSize: '0%', | |||||
maxSize: '100%', | |||||
sort: 'ascending', | |||||
gap: 2, | |||||
label: { | |||||
show: true, | |||||
position: 'inside' | |||||
}, | |||||
labelLine: { | |||||
length: 10, | |||||
lineStyle: { | |||||
width: 1, | |||||
type: 'solid' | |||||
} | |||||
}, | |||||
itemStyle: { | |||||
borderColor: '#fff', | |||||
borderWidth: 1 | |||||
}, | |||||
emphasis: { | |||||
label: { | |||||
fontSize: 20 | |||||
} | |||||
}, | |||||
data: changeData | |||||
} | |||||
] | |||||
}; | |||||
myChart.setOption(option); | |||||
} | |||||
//柱状图-id--tooltip-legend-xAxis-yAxis-grid-series | //柱状图-id--tooltip-legend-xAxis-yAxis-grid-series | ||||
function barChartMethod(id,tooltip,legend,xAxis,yAxis,grid,series){ | function barChartMethod(id,tooltip,legend,xAxis,yAxis,grid,series){ | ||||
var barChart = echarts.init(document.getElementById(id)); | var barChart = echarts.init(document.getElementById(id)); | ||||
var barOption = { | |||||
tooltip: { | |||||
}, | |||||
}; | |||||
var barOption = {tooltip: {},}; | |||||
if (tooltip) barOption.tooltip = tooltip; | if (tooltip) barOption.tooltip = tooltip; | ||||
if (legend) barOption.legend = legend; | if (legend) barOption.legend = legend; | ||||
if (xAxis) barOption.xAxis = xAxis; | if (xAxis) barOption.xAxis = xAxis; | ||||
@@ -372,13 +400,18 @@ | |||||
barChart.setOption(barOption); | barChart.setOption(barOption); | ||||
} | } | ||||
// 处理数据集合 | |||||
function handleData(data){ | |||||
return data.map((item,index) => { | |||||
return { | |||||
name: item.name+" "+item.value+" 人", | |||||
value: (index+1)*2 | |||||
}; | |||||
//对比例进行单独处理 | |||||
function handleAccount(data){ | |||||
// 计算总值 | |||||
var total = data.reduce((sum, item) => sum + item.value, 0); | |||||
// 计算整数比例 | |||||
var percentages = data.map(item => Math.floor((item.value / total) * 100)); | |||||
// 计算调整后的最后一个比例,以确保总和为 100% | |||||
var sumOfPercentages = percentages.reduce((sum, value) => sum + value, 0); | |||||
// 调整最后一个比例 | |||||
percentages[percentages.length - 1] += (100 - sumOfPercentages); | |||||
data.some(function (item,index){ | |||||
item.account = percentages[index]; | |||||
}); | }); | ||||
} | } | ||||
</script> | </script> | ||||
@@ -8,52 +8,82 @@ | |||||
</head> | </head> | ||||
<body class="white-bg"> | <body class="white-bg"> | ||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> | <div class="wrapper wrapper-content animated fadeInRight ibox-content"> | ||||
<ul class="nav head_top" id="tab"> | |||||
<div class="text-right hidden-print" style="float: right"> | |||||
<button class="btn btn-unite" onclick="submitHandler()">保存</button> | |||||
</div> | |||||
</ul> | |||||
<form class="form-horizontal m" id="form-meeting-add"> | <form class="form-horizontal m" id="form-meeting-add"> | ||||
<div> | |||||
<input name="meetingName" class="meeting-add-input meeting-add-header" placeholder="请填写培训活动标题"> | |||||
</div> | |||||
<hr> | |||||
<div class="col-md-12"> | <div class="col-md-12"> | ||||
<div class="col-md-6"> | <div class="col-md-6"> | ||||
<div class="form-group"> | |||||
<div> | |||||
<textarea name="meetingContent" class="meeting-add-content meeting-add-font" placeholder="请填写培训活动简介" ></textarea> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left control-label" style="text-align: left;"><span class="specialSign">*</span>活动标题</label> | |||||
<div class="daj_right"> | |||||
<input name="meetingName" class="form-control daj_frame" placeholder="请填写培训活动标题" required> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<hr style="width: 102%;margin-left: -30px"> | |||||
<div class="form-group"> | |||||
<div class="div-display"> | |||||
<label class="meeting-add-font">培训日期:</label> | |||||
</div> | |||||
<div class="div-display"> | |||||
<input name="meetingDate" type="text" class="time-input meeting-add-font" placeholder="请选择培训日期"/> | |||||
</div> | |||||
<div class="col-md-6"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left control-label" style="text-align: right;">培训日期</label> | |||||
<div class="daj_right"> | |||||
<input name="meetingDate" type="text" class="form-control daj_frame time-input" placeholder="请选择培训日期"/> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group"> | |||||
<div class="div-display"> | |||||
<label class="meeting-add-font">相关附件:</label> | |||||
</div> | |||||
<div class="div-display"> | |||||
<button class="btn btn-unite meeting-add-font meeting-btn-add" onclick="">上 传</button> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">活动信息简介填写:</label> | |||||
<div class="daj_right_two"> | |||||
<textarea name="meetingContent" class="form-control" rows="5" style="resize: none;" placeholder="请填写培训活动简介"></textarea> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">附件</label> | |||||
<div class="daj_right_two fj_box1"> | |||||
<div style="height: 43px;width: 100%;margin-top: 3px;"> | |||||
<input name="fj" type="button" class="fj_btn" onclick=""> | |||||
<input type="file" name="fileUpload_l" id="fileUpload_l" onchange="" style="display:none;" accept=".pdf,.ofd,.txt,.wps,.xlsx,.xls,.pub,.docx,.doc,.xml,.jpg,.png"> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group select-table table-striped meeting-add-files"> | |||||
<table id="bootstrap-table"> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label"></label> | |||||
<div class="daj_right_two fj_box1" style="min-height:47px;height: auto;"> | |||||
<table id="table-show" class="table table-hover" style="margin-bottom: 10px;"> | |||||
<tbody> | |||||
<tr> | |||||
<td class="width-40"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(三月至五月).docx</td> | |||||
<td class="width-8">非密</td> | |||||
<td class="width-20"></td> | |||||
<td> | |||||
<a style='margin-right: 10px;'><img src="/img/use/xiazai.png"/></a> | |||||
<a data-id =""><img src="/img/use/delete.png"/></a> | |||||
</td> | |||||
</tr> | |||||
<tr> | |||||
<td class="width-40"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(二月).docx</td> | |||||
<td class="width-8">机密</td> | |||||
<td class="width-20">保密期限:2025-01-14</td> | |||||
<td> | |||||
<a style='margin-right: 10px;'><img src="/img/use/xiazai.png"/></a> | |||||
<a data-id =""><img src="/img/use/delete.png"/></a> | |||||
</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | </table> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="col-md-6" style="height: 524px"> | |||||
<div class="ibox" > | |||||
<div class="ibox-content"> | |||||
<select class="form-control dual_select" id="duallistbox_demo" multiple style="height: 350px;" > | |||||
<option th:each="ul,temp:${userList}" th:data_phone="${ul.mobilePhone}" th:value="${ul.id}" th:text="${ul.name}"></option> | |||||
</select> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">人员情况</label> | |||||
<div class="daj_right_two" style="display: flex;"> | |||||
<div id="invite" style="width: 50%;"></div> | |||||
<div style="width: 50%;"><a class="btn btn-unite" onclick="meetManAdd()"><i class="fa fa-user-o"></i> 添加</a></div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -65,31 +95,15 @@ | |||||
var prefix = ctx + "system/meeting"; | var prefix = ctx + "system/meeting"; | ||||
var editFlag = [[${@permission.hasPermi('system:meeting:edit')}]]; | var editFlag = [[${@permission.hasPermi('system:meeting:edit')}]]; | ||||
var removeFlag = [[${@permission.hasPermi('system:meeting:remove')}]]; | var removeFlag = [[${@permission.hasPermi('system:meeting:remove')}]]; | ||||
// 左右互选控件 | |||||
$('.dual_select').bootstrapDualListbox({ | |||||
nonSelectedListLabel: '未邀请人员', | |||||
selectedListLabel: '已邀请人员', | |||||
preserveSelectionOnMove: 'moved', | |||||
moveOnSelect: false, // 出现一个剪头,表示可以一次选择一个 | |||||
filterTextClear: '搜索重置', | |||||
moveSelectedLabel: "添加", | |||||
moveAllLabel: '添加所有', | |||||
removeSelectedLabel: "移除", | |||||
removeAllLabel: '移除所有', | |||||
filterPlaceHolder:"模糊搜索", | |||||
infoTextEmpty : "无用户可选择", | |||||
infoTextFiltered:"搜索到 {0} 总共 {1}", | |||||
infoText: '共{0}个', | |||||
showFilterInputs: true,// 是否带搜索 | |||||
selectorMinimalHeight: 160 | |||||
var userList = []; | |||||
$("#form-meeting-add").validate({ | |||||
focusCleanup: true | |||||
}); | }); | ||||
function submitHandler() { | function submitHandler() { | ||||
if ($.validate.form()) { | if ($.validate.form()) { | ||||
var userList = getSelectedItems("duallistbox_demo"); | |||||
if (userList.length === 0) { | if (userList.length === 0) { | ||||
$.modal.alertWarning("请至少选择一条记录"); | |||||
$.modal.alertWarning("请至少选择一个参与人员"); | |||||
return; | return; | ||||
} | } | ||||
var array = $('#form-meeting-add').serializeArray(); | var array = $('#form-meeting-add').serializeArray(); | ||||
@@ -106,59 +120,34 @@ | |||||
} | } | ||||
} | } | ||||
// 获取双重多选中的值 | |||||
function getSelectedItems(id) { | |||||
var selectedItems = []; | |||||
// 获取选中的选项 | |||||
$("#"+id+" option:selected").each(function() { | |||||
selectedItems.push({ | |||||
personnelName: $(this).text(), | |||||
isSign: 0, | |||||
personnelId: $(this).val(), | |||||
mobilePhone:$(this).attr("data_phone") | |||||
}); | |||||
}); | |||||
return selectedItems; | |||||
} | |||||
//附件表格加载 | |||||
$(function() { | |||||
function meetManAdd(){ | |||||
var options = { | var options = { | ||||
pagination:false, | |||||
sidePagination: "client", | |||||
virtualScroll: true, | |||||
showHeader:false, | |||||
height:160, | |||||
modalName: "文件信息", | |||||
data:[ | |||||
{id:1,name:"<<关于**********教育文件>>"}, | |||||
{id:2,name:"<<关于**********活动文件>>"}, | |||||
{id:4,name:"<<关于**********活动文件>>"}, | |||||
{id:5,name:"<<关于**********活动文件>>"}, | |||||
], | |||||
columns: [ | |||||
{ | |||||
field: 'id', | |||||
title: '主键id', | |||||
visible: false | |||||
}, | |||||
{ | |||||
field: 'name', | |||||
title: '文件标题' | |||||
}, | |||||
{ | |||||
title: '操作', | |||||
align: 'center', | |||||
formatter: function(value, row, index) { | |||||
var actions = []; | |||||
actions.push('<a class="btn btn-unite btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="" >下载</a> '); | |||||
actions.push('<a class="btn btn-unite btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')">删除</a>'); | |||||
return actions.join(''); | |||||
} | |||||
}] | |||||
title: '人员选择', | |||||
url: prefix + "/userSelect", | |||||
skin: 'layui-layer-blue', | |||||
btn: ['保存','取消'], | |||||
width: Math.floor(window.innerWidth), | |||||
height: Math.floor(window.innerHeight)+110, | |||||
maxmin: false, | |||||
full: false, | |||||
yes: function(index, layero) { | |||||
var iframeWin = layero.find('iframe')[0]; | |||||
userList = iframeWin.contentWindow.getSelectedItems(); | |||||
$.modal.close(index); | |||||
showByUser(); | |||||
} | |||||
}; | }; | ||||
$.table.init(options); | |||||
}); | |||||
$.modal.openOptions(options); | |||||
} | |||||
//根据用户数据集合进行回显 | |||||
function showByUser(){ | |||||
var html = ""; | |||||
if (userList && userList.length>0){ | |||||
html = userList.map(item => item.personnelName).join(','); | |||||
} | |||||
$("#invite").html(html); | |||||
} | |||||
</script> | </script> | ||||
</body> | </body> | ||||
</html> | </html> |
@@ -8,53 +8,83 @@ | |||||
</head> | </head> | ||||
<body class="white-bg"> | <body class="white-bg"> | ||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> | <div class="wrapper wrapper-content animated fadeInRight ibox-content"> | ||||
<ul class="nav head_top" id="tab"> | |||||
<div class="text-right hidden-print" style="float: right"> | |||||
<button class="btn btn-unite" onclick="submitHandler()">保存</button> | |||||
</div> | |||||
</ul> | |||||
<form class="form-horizontal m" id="form-meeting-edit" th:object="${rwkMeeting}"> | <form class="form-horizontal m" id="form-meeting-edit" th:object="${rwkMeeting}"> | ||||
<input name="id" th:field="*{id}" type="hidden"> | <input name="id" th:field="*{id}" type="hidden"> | ||||
<div> | |||||
<input name="meetingName" class="meeting-add-input meeting-add-header" th:field="*{meetingName}" placeholder="请填写培训活动标题"> | |||||
</div> | |||||
<hr> | |||||
<div class="col-md-12"> | <div class="col-md-12"> | ||||
<div class="col-md-6"> | <div class="col-md-6"> | ||||
<div class="form-group"> | |||||
<div> | |||||
<textarea name="meetingContent" class="meeting-add-content meeting-add-font" placeholder="请填写培训活动简介">[[*{meetingContent}]]</textarea> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left control-label" style="text-align: left;"><span class="specialSign">*</span>活动标题</label> | |||||
<div class="daj_right"> | |||||
<input name="meetingName" class="form-control daj_frame" th:field="*{meetingName}" placeholder="请填写培训活动标题" required> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<hr style="width: 102%;margin-left: -30px"> | |||||
<div class="form-group"> | |||||
<div class="div-display"> | |||||
<label class="meeting-add-font">培训日期:</label> | |||||
</div> | |||||
<div class="div-display"> | |||||
<input name="meetingDate" type="text" class="time-input meeting-add-font" th:field="*{meetingDate}" placeholder="请选择培训日期"/> | |||||
</div> | |||||
<div class="col-md-6"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left control-label" style="text-align: right;">培训日期</label> | |||||
<div class="daj_right"> | |||||
<input name="meetingDate" type="text" th:field="*{meetingDate}" class="form-control daj_frame time-input" placeholder="请选择培训日期"/> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group"> | |||||
<div class="div-display"> | |||||
<label class="meeting-add-font">相关附件:</label> | |||||
</div> | |||||
<div class="div-display"> | |||||
<button class="btn btn-unite meeting-add-font meeting-btn-add" onclick="">上 传</button> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">活动信息简介填写:</label> | |||||
<div class="daj_right_two"> | |||||
<textarea name="meetingContent" class="form-control" rows="5" style="resize: none;" placeholder="请填写培训活动简介">[[*{meetingContent}]]</textarea> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">附件</label> | |||||
<div class="daj_right_two fj_box1"> | |||||
<div style="height: 43px;width: 100%;margin-top: 3px;"> | |||||
<input name="fj" type="button" class="fj_btn" onclick=""> | |||||
<input type="file" name="fileUpload_l" id="fileUpload_l" onchange="" style="display:none;" accept=".pdf,.ofd,.txt,.wps,.xlsx,.xls,.pub,.docx,.doc,.xml,.jpg,.png"> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group select-table table-striped meeting-add-files"> | |||||
<table id="bootstrap-table"> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label"></label> | |||||
<div class="daj_right_two fj_box1" style="min-height:47px;height: auto;"> | |||||
<table id="table-show" class="table table-hover" style="margin-bottom: 10px;"> | |||||
<tbody> | |||||
<tr> | |||||
<td class="width-40"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(三月至五月).docx</td> | |||||
<td class="width-8">非密</td> | |||||
<td class="width-20"></td> | |||||
<td> | |||||
<a style='margin-right: 10px;'><img src="/img/use/xiazai.png"/></a> | |||||
<a data-id =""><img src="/img/use/delete.png"/></a> | |||||
</td> | |||||
</tr> | |||||
<tr> | |||||
<td class="width-40"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(二月).docx</td> | |||||
<td class="width-8">机密</td> | |||||
<td class="width-20">保密期限:2025-01-14</td> | |||||
<td> | |||||
<a style='margin-right: 10px;'><img src="/img/use/xiazai.png"/></a> | |||||
<a data-id =""><img src="/img/use/delete.png"/></a> | |||||
</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | </table> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="col-md-6" style="height: 524px"> | |||||
<div class="ibox" > | |||||
<div class="ibox-content"> | |||||
<select class="form-control dual_select" id="duallistbox_demo" multiple style="height: 350px;" > | |||||
<option th:each="ul,temp:${userList}" th:data_phone="${ul.mobilePhone}" th:value="${ul.id}" th:text="${ul.name}"></option> | |||||
</select> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">人员情况</label> | |||||
<div class="daj_right_two" style="display: flex;"> | |||||
<div id="invite" style="width: 50%;"></div> | |||||
<div style="width: 50%;"><a class="btn btn-unite" onclick="meetManUpdate()"><i class="fa fa-user-o"></i> 修改</a></div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -64,36 +94,16 @@ | |||||
<th:block th:include="include :: bootstrap-duallistbox-js" /> | <th:block th:include="include :: bootstrap-duallistbox-js" /> | ||||
<script th:inline="javascript"> | <script th:inline="javascript"> | ||||
var prefix = ctx + "system/meeting"; | var prefix = ctx + "system/meeting"; | ||||
var editFlag = [[${@permission.hasPermi('system:meeting:edit')}]]; | |||||
var removeFlag = [[${@permission.hasPermi('system:meeting:remove')}]]; | |||||
var rwkMeetingStaffList = [[${rwkMeeting.rwkMeetingStaffList}]] | |||||
// 左右互选控件 | |||||
$('.dual_select').bootstrapDualListbox({ | |||||
nonSelectedListLabel: '未邀请人员', | |||||
selectedListLabel: '已邀请人员', | |||||
preserveSelectionOnMove: 'moved', | |||||
moveOnSelect: false, // 出现一个剪头,表示可以一次选择一个 | |||||
filterTextClear: '搜索重置', | |||||
moveSelectedLabel: "添加", | |||||
moveAllLabel: '添加所有', | |||||
removeSelectedLabel: "移除", | |||||
removeAllLabel: '移除所有', | |||||
filterPlaceHolder:"模糊搜索", | |||||
infoTextEmpty : "无用户可选择", | |||||
infoTextFiltered:"搜索到 {0} 总共 {1}", | |||||
infoText: '共{0}个', | |||||
showFilterInputs: true,// 是否带搜索 | |||||
selectorMinimalHeight: 160 | |||||
var userList = [[${rwkMeeting.rwkMeetingStaffList}]]; | |||||
showByUser(); | |||||
$("#form-meeting-edit").validate({ | |||||
focusCleanup: true | |||||
}); | }); | ||||
//回显左右选择控件的值 | |||||
var selectedData = rwkMeetingStaffList.map(entity => entity.personnelId); | |||||
$('#duallistbox_demo').val(selectedData).bootstrapDualListbox('refresh'); | |||||
function submitHandler() { | function submitHandler() { | ||||
if ($.validate.form()) { | if ($.validate.form()) { | ||||
var userList = getSelectedItems("duallistbox_demo"); | |||||
if (userList.length === 0) { | if (userList.length === 0) { | ||||
$.modal.alertWarning("请至少选择一条记录"); | |||||
$.modal.alertWarning("请至少选择一个参与人员"); | |||||
return; | return; | ||||
} | } | ||||
var array = $('#form-meeting-edit').serializeArray(); | var array = $('#form-meeting-edit').serializeArray(); | ||||
@@ -110,59 +120,34 @@ | |||||
} | } | ||||
} | } | ||||
// 获取双重多选中的值 | |||||
function getSelectedItems(id) { | |||||
var selectedItems = []; | |||||
// 获取选中的选项 | |||||
$("#"+id+" option:selected").each(function() { | |||||
selectedItems.push({ | |||||
personnelName: $(this).text(), | |||||
isSign: 0, | |||||
personnelId: $(this).val(), | |||||
mobilePhone:$(this).attr("data_phone") | |||||
}); | |||||
}); | |||||
return selectedItems; | |||||
} | |||||
//附件表格加载 | |||||
$(function() { | |||||
function meetManUpdate(){ | |||||
var options = { | var options = { | ||||
pagination:false, | |||||
sidePagination: "client", | |||||
virtualScroll: true, | |||||
showHeader:false, | |||||
height:160, | |||||
modalName: "文件信息", | |||||
data:[ | |||||
{id:1,name:"<<关于**********教育文件>>"}, | |||||
{id:2,name:"<<关于**********活动文件>>"}, | |||||
{id:4,name:"<<关于**********活动文件>>"}, | |||||
{id:5,name:"<<关于**********活动文件>>"}, | |||||
], | |||||
columns: [ | |||||
{ | |||||
field: 'id', | |||||
title: '主键id', | |||||
visible: false | |||||
}, | |||||
{ | |||||
field: 'name', | |||||
title: '文件标题' | |||||
}, | |||||
{ | |||||
title: '操作', | |||||
align: 'center', | |||||
formatter: function(value, row, index) { | |||||
var actions = []; | |||||
actions.push('<a class="btn btn-unite btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="" >下载</a> '); | |||||
actions.push('<a class="btn btn-unite btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')">删除</a>'); | |||||
return actions.join(''); | |||||
} | |||||
}] | |||||
title: '人员选择', | |||||
url: prefix + "/userSelect", | |||||
skin: 'layui-layer-blue', | |||||
btn: ['保存','取消'], | |||||
width: Math.floor(window.innerWidth), | |||||
height: Math.floor(window.innerHeight)+110, | |||||
maxmin: false, | |||||
full: false, | |||||
yes: function(index, layero) { | |||||
var iframeWin = layero.find('iframe')[0]; | |||||
userList = iframeWin.contentWindow.getSelectedItems(); | |||||
$.modal.close(index); | |||||
showByUser(); | |||||
} | |||||
}; | }; | ||||
$.table.init(options); | |||||
}); | |||||
$.modal.openOptions(options); | |||||
} | |||||
//根据用户数据集合进行回显 | |||||
function showByUser(){ | |||||
var html = ""; | |||||
if (userList && userList.length>0){ | |||||
html = userList.map(item => item.personnelName).join(','); | |||||
} | |||||
$("#invite").html(html); | |||||
} | |||||
</script> | </script> | ||||
</body> | </body> | ||||
</html> | </html> |
@@ -113,15 +113,15 @@ | |||||
var options = { | var options = { | ||||
title: '新增培训活动', | title: '新增培训活动', | ||||
url: prefix + "/add", | url: prefix + "/add", | ||||
skin: 'layui-layer-gray', | |||||
btn: ['关闭'], | |||||
skin: 'layui-layer-blue', | |||||
btn: ['保存','取消'], | |||||
width: 1400, | width: 1400, | ||||
height: 800, | height: 800, | ||||
maxmin: false, | maxmin: false, | ||||
full: false, | full: false, | ||||
yes: function (index, layero) { | |||||
$.modal.close(index); | |||||
$.table.refresh(); // 关闭后刷新表格数据(不刷新页面) | |||||
yes: function(index, layero) { | |||||
var iframeWin = layero.find('iframe')[0]; | |||||
iframeWin.contentWindow.submitHandler(index, layero); | |||||
} | } | ||||
}; | }; | ||||
$.modal.openOptions(options); | $.modal.openOptions(options); | ||||
@@ -133,15 +133,15 @@ | |||||
var options = { | var options = { | ||||
title: '修改培训活动', | title: '修改培训活动', | ||||
url: url, | url: url, | ||||
skin: 'layui-layer-gray', | |||||
btn: ['关闭'], | |||||
skin: 'layui-layer-blue', | |||||
btn: ['保存', '取消'], | |||||
width: 1400, | width: 1400, | ||||
height: 800, | height: 800, | ||||
maxmin: false, | maxmin: false, | ||||
full: false, | full: false, | ||||
yes: function (index, layero) { | |||||
$.modal.close(index); | |||||
$.table.refresh(); // 关闭后刷新表格数据(不刷新页面) | |||||
yes: function(index, layero) { | |||||
var iframeWin = layero.find('iframe')[0]; | |||||
iframeWin.contentWindow.submitHandler(index, layero); | |||||
} | } | ||||
}; | }; | ||||
$.modal.openOptions(options); | $.modal.openOptions(options); | ||||
@@ -158,7 +158,7 @@ | |||||
height: 800, | height: 800, | ||||
maxmin: false, | maxmin: false, | ||||
full: false, | full: false, | ||||
yes: function (index, layero) { | |||||
yes: function (index) { | |||||
$.modal.close(index); | $.modal.close(index); | ||||
} | } | ||||
}; | }; | ||||
@@ -2,175 +2,123 @@ | |||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > | <html lang="zh" xmlns:th="http://www.thymeleaf.org" > | ||||
<head> | <head> | ||||
<th:block th:include="include :: header('培训人员详情')" /> | <th:block th:include="include :: header('培训人员详情')" /> | ||||
<link th:href="@{/css/use/css1.css}" rel="stylesheet"/> | |||||
<link th:href="@{/ruoyi/css/meeting.css}" rel="stylesheet"/> | <link th:href="@{/ruoyi/css/meeting.css}" rel="stylesheet"/> | ||||
</head> | </head> | ||||
<body class="white-bg"> | <body class="white-bg"> | ||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content meeting-content"> | <div class="wrapper wrapper-content animated fadeInRight ibox-content meeting-content"> | ||||
<!-- <ul class="nav head_top" id="tab">--> | |||||
<!-- <div class="text-right hidden-print" style="float: right">--> | |||||
<!-- <button class="btn btn-unite" >打印签到表</button>--> | |||||
<!-- </div>--> | |||||
<!-- </ul>--> | |||||
<form class="form-horizontal m meeting-content" id="form-information-view" style="margin: 10px;" th:object="${rwkMeeting}"> | |||||
<div> | |||||
<h1 style="font-size: 25px">[[*{meetingName}]]</h1> | |||||
</div> | |||||
<hr> | |||||
<div class="meeting-introdution meeting-add-font"> | |||||
<div style="width:100%;height:auto;white-space: pre-wrap;">[[*{meetingContent}]]</div> | |||||
<div>培训时间:[[*{meetingDate}]]</div> | |||||
</div> | |||||
<hr> | |||||
<div class="inline-meeting-div meeting-edit-files"> | |||||
<table id="bootstrap-table-file"> | |||||
</table> | |||||
<form class="form-horizontal m" id="form-information-view" style="margin: 10px;" th:object="${rwkMeeting}"> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label"><span class="specialSign">*</span>活动标题</label> | |||||
<div class="daj_right_two"> | |||||
<input name="meetingName" class="form-control daj_frame" th:field="*{meetingName}" placeholder="请填写培训活动标题" readonly> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
<div class="inline-meeting-div" style="float: left;width: 33%"> | |||||
<table id="bootstrap-table" ></table> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">活动简介</label> | |||||
<div class="daj_right_two"> | |||||
<div style="width:100%;height:auto;white-space: pre-wrap;">[[*{meetingContent}]]</div> | |||||
<div>培训时间:[[*{meetingDate}]]</div> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
<div class="inline-meeting-div meeting-pieChart1" > | |||||
<div id="pieChart1" class="pieChart1"></div> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">其他</label> | |||||
<div class="daj_right_two"> | |||||
<div style="display: flex;margin-bottom: 20px;"> | |||||
<div>签到人数</div> | |||||
<div class="progress" style="width: 50%;margin-left: 15px;margin-top: 4px;margin-bottom:0;"> | |||||
<div style="width: 50%;" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress-bar progress-bar-success"> | |||||
<span id="now">50</span> | |||||
</div> | |||||
</div> | |||||
<div id="total">100</div> | |||||
</div> | |||||
<div style="display: flex;"> | |||||
<div style="width: 50%;margin-right: 20px;"> | |||||
<table class="userTable"> | |||||
<tr> | |||||
<th>姓名</th> | |||||
<th>签到情况</th> | |||||
<th>手机号</th> | |||||
</tr> | |||||
<tr> | |||||
<td>张三</td> | |||||
<td>已签到</td> | |||||
<td>手机号测试</td> | |||||
</tr> | |||||
</table> | |||||
</div> | |||||
<div style="width: 50%;border: 1px solid #d7dff2;"> | |||||
<table id="table-show" class="table table-hover" style="margin-bottom: 10px;"> | |||||
<tbody> | |||||
<tr> | |||||
<td style="width: 80%;"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(三月至五月).docx</td> | |||||
<td> | |||||
<a style='margin-right: 10px;'><img src="/img/use/xiazai.png"/></a> | |||||
</td> | |||||
</tr> | |||||
<tr> | |||||
<td style="width: 80%;"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(二月).docx</td> | |||||
<td> | |||||
<a style='margin-right: 10px;'><img src="/img/use/xiazai.png"/></a> | |||||
</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
<th:block th:include="include :: footer" /> | <th:block th:include="include :: footer" /> | ||||
<th:block th:include="include :: echarts-js" /> | <th:block th:include="include :: echarts-js" /> | ||||
<script th:inline="javascript"> | <script th:inline="javascript"> | ||||
var prefix = ctx + "system/meeting"; | var prefix = ctx + "system/meeting"; | ||||
var rwkMeetingStaffList = [[${rwkMeeting.rwkMeetingStaffList}]]; | |||||
var userList = [[${rwkMeeting.rwkMeetingStaffList}]]; | |||||
init(); | init(); | ||||
//初始化加载 | //初始化加载 | ||||
function init(){ | function init(){ | ||||
peopleShow(rwkMeetingStaffList); | |||||
pieShow(rwkMeetingStaffList); | |||||
peopleShow(userList); | |||||
numShow(userList); | |||||
} | } | ||||
//统计饼图展示 | //统计饼图展示 | ||||
function pieShow(data){ | |||||
function numShow(data){ | |||||
var totalInvited = data.length; // 受邀人员总数 | var totalInvited = data.length; // 受邀人员总数 | ||||
var signedInCount = data.filter(person => person.isSign == 1).length; // 签到人数 | var signedInCount = data.filter(person => person.isSign == 1).length; // 签到人数 | ||||
var pieChart = echarts.init(document.getElementById('pieChart1')); | |||||
var option = { | |||||
tooltip: { | |||||
trigger: 'item' | |||||
}, | |||||
legend: { | |||||
top: '1%', | |||||
left: 'center' | |||||
}, | |||||
series: [ | |||||
{ | |||||
name: '签到情况', | |||||
type: 'pie', | |||||
radius: ['40%', '70%'], | |||||
avoidLabelOverlap: false, | |||||
label: { | |||||
show: false, | |||||
position: 'center' | |||||
}, | |||||
emphasis: { | |||||
label: { | |||||
show: true, | |||||
fontSize: 15, | |||||
fontWeight: 'bold' | |||||
} | |||||
}, | |||||
labelLine: { | |||||
show: false | |||||
}, | |||||
data: [ | |||||
{ value: signedInCount, name: '签到人数' }, | |||||
{ value: totalInvited-signedInCount, name: '未签到人数' } | |||||
] | |||||
} | |||||
] | |||||
}; | |||||
pieChart.setOption(option); | |||||
$("#now").text(signedInCount); | |||||
$("#total").text(totalInvited); | |||||
$(".progress-bar.progress-bar-success").css("width",Math.floor((signedInCount/totalInvited)*100)+"%"); | |||||
} | } | ||||
//受邀人员展示 | //受邀人员展示 | ||||
function peopleShow(data){ | function peopleShow(data){ | ||||
const options = { | |||||
height: 325, | |||||
pagination:false, | |||||
sidePagination: "client", | |||||
virtualScroll: true, | |||||
data:data, | |||||
columns: [ | |||||
{ | |||||
field: 'id', | |||||
title: '主键id', | |||||
visible: false | |||||
}, | |||||
{ | |||||
field: 'personnelName', | |||||
title: '姓名' | |||||
}, | |||||
{ | |||||
field: 'isSign', | |||||
title: '签到情况', | |||||
formatter: function (value, row, index) { | |||||
if (value == 1) { | |||||
return '<span class="badge badge-primary">已签到</span> '; | |||||
} else { | |||||
return '<span class="badge badge-danger">未签到</span> '; | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
field: 'mobilePhone', | |||||
title: '手机号' | |||||
}] | |||||
}; | |||||
$.table.init(options); | |||||
var html = "<tr>\n" + | |||||
" <th>姓名</th>\n" + | |||||
" <th>签到情况</th>\n" + | |||||
" <th>手机号</th>\n" + | |||||
"</tr>"; | |||||
data.some(function (item,index){ | |||||
html += "<tr>\n" + | |||||
" <td>"+item.personnelName+"</td>\n" + | |||||
" <td class=\""+(item.isSign == 1?'signNormal':'signFail')+"\">" + | |||||
"<span>"+(item.isSign == 1?'√':'×')+"</span><span>"+(item.isSign == 1?'已签到':'未签到')+"</span>" + | |||||
"</td>\n" + | |||||
" <td>"+item.mobilePhone+"</td>\n" + | |||||
"</tr>" | |||||
}); | |||||
$(".userTable").html(html); | |||||
} | } | ||||
$(function() { | |||||
const options = { | |||||
id: 'bootstrap-table-file', | |||||
height: 325, | |||||
pagination:false, | |||||
sidePagination: "client", | |||||
showFooter: false, | |||||
showSearch: false, | |||||
showRefresh: false, | |||||
showToggle: false, | |||||
showColumns: false, | |||||
virtualScroll: true, | |||||
data:[ | |||||
{id:1,name:"<<关于**********教育文件>>"}, | |||||
{id:2,name:"<<关于**********活动文件>>"}, | |||||
{id:4,name:"<<关于**********活动文件>>"}, | |||||
{id:5,name:"<<关于**********活动文件>>"}, | |||||
{id:5,name:"<<关于**********活动文件>>"}, | |||||
{id:5,name:"<<关于**********活动文件>>"}, | |||||
], | |||||
columns: [ | |||||
{ | |||||
field: 'id', | |||||
title: '主键id', | |||||
visible: false | |||||
}, | |||||
{ | |||||
field: 'name', | |||||
title: '文件标题' | |||||
}, | |||||
{ | |||||
title: '操作', | |||||
align: 'center', | |||||
formatter: function(value, row, index) { | |||||
var actions = []; | |||||
actions.push('<a class="btn btn-unite btn-xs " href="javascript:void(0)" onclick="" >下载</a> '); | |||||
return actions.join(''); | |||||
} | |||||
}] | |||||
}; | |||||
$.table.init(options); | |||||
}); | |||||
</script> | </script> | ||||
</body> | </body> | ||||
</html> | </html> |
@@ -0,0 +1,72 @@ | |||||
<!DOCTYPE html> | |||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > | |||||
<head> | |||||
<th:block th:include="include :: header('人员选择')" /> | |||||
<link th:href="@{/css/use/css1.css}" rel="stylesheet"/> | |||||
<link th:href="@{/ruoyi/css/meeting.css}" rel="stylesheet"/> | |||||
<th:block th:include="include :: bootstrap-duallistbox-css" /> | |||||
</head> | |||||
<body class="white-bg"> | |||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> | |||||
<div class="col-md-12"><div class="black_line"></div></div> | |||||
<div class="col-md-12"> | |||||
<div class="daj_middle"> | |||||
<label class="daj_left_two control-label">人员添加:</label> | |||||
<div class="daj_right_two"> | |||||
<div class="ibox" > | |||||
<div class="ibox-content"> | |||||
<select class="form-control dual_select" id="duallistbox_demo" multiple style="height: 300px;" > | |||||
<option th:each="ul,temp:${userList}" th:data_phone="${ul.mobilePhone}" th:value="${ul.id}" th:text="${ul.name}"></option> | |||||
</select> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<th:block th:include="include :: footer" /> | |||||
<th:block th:include="include :: bootstrap-duallistbox-js" /> | |||||
<script th:inline="javascript"> | |||||
var parentWindow = getParentWindow(); | |||||
//局领导意见记录 | |||||
var userList = parentWindow.userList; | |||||
// 左右互选控件 | |||||
$('.dual_select').bootstrapDualListbox({ | |||||
nonSelectedListLabel: '未邀请人员', | |||||
selectedListLabel: '已邀请人员', | |||||
preserveSelectionOnMove: 'moved', | |||||
moveOnSelect: false, // 出现一个剪头,表示可以一次选择一个 | |||||
filterTextClear: '搜索重置', | |||||
moveSelectedLabel: "添加", | |||||
moveAllLabel: '添加所有', | |||||
removeSelectedLabel: "移除", | |||||
removeAllLabel: '移除所有', | |||||
filterPlaceHolder:"模糊搜索", | |||||
infoTextEmpty : "无用户可选择", | |||||
infoTextFiltered:"搜索到 {0} 总共 {1}", | |||||
infoText: '共{0}个', | |||||
showFilterInputs: true,// 是否带搜索 | |||||
selectorMinimalHeight: 160 | |||||
}); | |||||
if (userList && userList.length>0){ | |||||
//回显左右选择控件的值 | |||||
var selectedData = userList.map(entity => entity.personnelId); | |||||
$('#duallistbox_demo').val(selectedData).bootstrapDualListbox('refresh'); | |||||
} | |||||
// 获取双重多选中的值 | |||||
function getSelectedItems() { | |||||
var selectedItems = []; | |||||
// 获取选中的选项 | |||||
$("#duallistbox_demo option:selected").each(function() { | |||||
selectedItems.push({ | |||||
personnelName: $(this).text(), | |||||
isSign: 0, | |||||
personnelId: $(this).val(), | |||||
mobilePhone:$(this).attr("data_phone") | |||||
}); | |||||
}); | |||||
return selectedItems; | |||||
} | |||||
</script> | |||||
</body> | |||||
</html> |