在线问卷调查系统 - 投票结果统计与分析 - 常规

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>投票</title>
<link href='../js/bootstrap/css/bootstrap.min.css' rel='stylesheet'>
<link rel='stylesheet' href='../layui/css/layui.css' media='all'>
<script src='../layui/layui.js'></script>
<script src='../js/jquery/jQuery-2.2.0.min.js'></script>
<script src='../js/bootstrap/js/bootstrap.min.js'></script>
<script src='../layui/echarts.min.js'></script>
</head>
<body>
<script>
$(document).ready(function () {
let poll_pid = 0;
var subject_sid = 0;
let answer_aid = 0;
<p>$.ajax({
async: false,
url: '/getAllVote',
type: 'get',
dateType: 'json',
success: function (data) {
//   console.log(data);
for (let i = 0; i &lt; data.length; i++) {</p>
<p>let tr = $('&lt;tr align='center' &gt;</tr>');
let td1 = $('<td></td>');
td1.append(data[i].vote_vid);</p>
<p>let td2 = $('<td></td>');
td2.append(data[i].vote_vtitled);</p>
<p>let td3 = $('<td></td>');
td3.html(data[i].vote_vcondition);</p>
<p>let td4 = $('<td></td>');
//layui-icon-praise
var dz = $('&lt;button id='dz' type='button' data-toggle='modal' data-target='#myModal1' class='layui-btn layui-btn-warm layui-icon layui-icon-praise '&gt;</button>')
var dwz = $('&lt;button id='dwz' type='button'  class='layui-btn  layui-icon layui-icon-praise '&gt;</button>')
var ck = $('&lt;button type='button' id='ck'  data-toggle='modal' data-target='#myModal2' class='layui-btn  layui-btn-warm  layui-icon layui-icon-face-smile '&gt;</button>');</p>
<!--data-toggle='modal' data-target='#myModal1'-->
<p>dz.click(function () {
$('#tm').val(data[i].vote_vtitled);</p>
<p>$.ajax({
async: false,
url: '/getSubject',
type: 'get',
dateType: 'json',
data: {
vote_vid: data[i].vote_vid
},
success: function (data) {
// console.log(data);
for (let i = data.length - 1; i &gt;= 0; i--) {
let timu = data[i];</p>
<p>let xuanXiang = '';
let inputType = '';
if (timu.subject_stype == 'x') {
xuanXiang = '单选';
inputType = 'radio';
} else if (timu.subject_stype == 't') {
xuanXiang = '多选';
inputType = 'checkbox';
}
//  $('.daan').val(data[j].answer_acontent);
var table = document.getElementById('tab');
// 在表格中插入一行【第一行插入】
var rows = table.insertRow(0);
var row = table.insertRow(0);</p>
<p>var aa = row.insertCell(0);
aa.innerHTML = '<div style='display: block;' >' + '\n' + '【&lt;input type='text' value='' + xuanXiang + '' style='border: none;width: 50px; color: #00a2d4;  white-space: nowrap; 'disabled='disabled'&gt;】<span>' + '\n' + timu.subject_scontent + '</span></div><br>';
$.ajax({
async: false,
url: '/getAnswer',
type: 'get',
dateType: 'json',
data: {
subject_sid: timu.subject_sid
},
success: function (resp) {
//  console.log(resp);
for (let j = 0; j &lt; resp.length; j++) {</p>
<p>answer_aid = resp[j].answer_aid
subject_sid = timu.subject_sid</p>
<p>let mm = resp[j].answer_acontent</p>
<p>// 设置新行的display属性为block
row.style.display = 'block';
rows.style.display = 'block';
var radio = rows.insertCell(0);
radio.innerHTML = '<span style='display: block;' >&lt;input style=' display:inline-block;float:left' class='checkbox' type='' + inputType + '' name='ra ' + i + ''&gt;' + '\n' + '&lt;input  class='daan' value='' + mm + '' style='border: none;' type='text' disabled='disabled' &gt;</span><br>';</p>
<p>}</p>
<p>}
});</p>
<p>}
}
});</p>
<p>});</p>
<p>td4.append(dz)
td4.append(ck)</p>
<p>/<em>if (data[i].vote_vcondition === '已结束') {
td4.append(dz)
} else {
td4.append(ck)
}</em>/</p>
<p>ck.click(function () {
$('#ttt').val(data[i].vote_vtitled);
subject_sid = data[i].subject_sid</p>
<p>$.ajax({
async: false,
url: '/getSubject',
type: 'get',
dateType: 'json',
data: {
vote_vid: data[i].vote_vid
},
success: function (data) {
// console.log(data);
for (let i = data.length - 1; i &gt;= 0; i--) {
let timu = data[i];</p>
<p>let xuanXiang = '';
if (timu.subject_stype == 'x') {
xuanXiang = '单选';
} else if (timu.subject_stype == 't') {
xuanXiang = '多选';
}</p>
<p>var table = document.getElementById('tabl');
// 在表格中插入一行【第一行插入】
var rows = table.insertRow(0);
var row = table.insertRow(0);</p>
<p>var aa = row.insertCell(0);
aa.innerHTML = '<div >' + '\n' + '【&lt;input type='text' value='' + xuanXiang + '' style='border: none;width: 50px; color: #00a2d4;  white-space: nowrap; 'disabled='disabled'&gt;】<span>' + '\n' + timu.subject_scontent + '</span></div><br>';
$.ajax({
async: false,
url: '/getAnswer',
type: 'get',
dateType: 'json',
data: {
subject_sid: timu.subject_sid
},
success: function (resp) {
//  console.log(resp);
for (let j = 0; j &lt; resp.length; j++) {</p>
<p>answer_aid = resp[j].answer_aid
subject_sid = timu.subject_sid
let mm = resp[j].answer_acontent</p>
<p>// 设置新行的display属性为block
rows.style.display = 'block';
var radio = rows.insertCell(0);
radio.innerHTML = '&lt;input  class='daan' value='' + mm + '' style='border: none;' type='text' disabled='disabled' &gt;'</p>
<p>}
$.ajax({
async: false,
url: '/getdDateils',
type: 'get',
dateType: 'json',
data: {
subject_sid: subject_sid,
value:answer_aid
},
success: function (resp2) {
console.log(resp2)
for (let j = 0; j &lt; resp2.length; j++) {
let value = resp2[j].value</p>
<p>// 在table中插入一行，并将cs插入到新的行中
var newRow = table.insertRow();
var cs = newRow.insertCell(1);
cs.innerHTML = '&lt;input value='该选项被选择了' + value + '次' style='border: none; color: red ' type='text' disabled='disabled' &gt;<br>';
}
}
})</p>
<p>}</p>
<p>});</p>
<p>}
}
});</p>
<p>})</p>
<p>dwz.click(function () {
alert('此问卷已投票，不能再投票！！！')
})</p>
<p>tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$('#table').append(tr);
}
}
})</p>
<p>$('#xq').click(function () {
alert('！！！')
})</p>
<p>$.ajax({
url: '/getPoll',
type: 'get',
dateType: 'json',
success: function (data) {
console.log(data);
for (let i = 0; i &lt; data.length; i++) {
poll_pid = data[i].poll_pid;
}
}
})</p>
<p>$('#tjwt').click(function () {
var checkboxes = document.querySelectorAll('input[class='checkbox']');
var inputs = document.querySelectorAll('input[class='daan']');</p>
<p>// 遍历复选框和输入框元素，将输入框的value值赋值给前面的复选框的value值
for (var x = 1; x &lt; checkboxes.length; x += 2) {
if (inputs[x]) {
checkboxes[x - 1].value = inputs[x].value;</p>
<p>}
}</p>
<p>var selectedValues = [];</p>
<p>// 遍历复选框元素，判断是否被选中，如果被选中则将其value值添加到数组中
for (var i = 0; i &lt; checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedValues.push(checkboxes[i].value);
}
}
// console.log(selectedValues);</p>
<p>$.ajax({
url: '/addDetails',
type: 'post',
dateType: 'json',
data: {
answer_aid: answer_aid,
poll_pid: poll_pid,
subject_sid: subject_sid,
},
success: function (resp) {
if (resp) {
alert('提交成功');
window.location.href = 'tp.html';
} else {
alert('提交失败，请重新填写');
console.log(answer_aid);
console.log(subject_sid);
}
}
})</p>
<p>var deferred = $.Deferred();</p>
<p>// 将deferred对象的promise返回
return deferred.promise();</p>
<p>})</p>
<p>document.getElementById('bzt').addEventListener('click', function () {
var content1 = document.getElementById('content1');
var content2 = document.getElementById('content2');</p>
<p>if (content1.style.display === 'none') {
content1.style.display = 'block';
content2.style.display = 'none';
} else {
content1.style.display = 'none';
content2.style.display = 'block';
}
});</p>
<p>})</p>
<p>layui.use(['jquery'], function () {
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.clear();
var names = [];
var mydata = [];</p>
<p>$.ajax({
type: 'get',
async: false,
url: '/getdDateils',
dateType: 'json',
/<em>data:{
subject_sid:subject_sid
},</em>/
success: function (data) {
//   var data = datas.data
console.log(data)
for (var i = 0; i &lt; data.length; i++) {
names.push(data[i].name);
mydata[i] = {value: data[i].value, name: data[i].name};
}
// 指定图表的配置项和数据
var option = {
title: {
text: '统计图显示',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: names
},
series: [
{
name: '题目',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: mydata,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
}
});
})</p>
</script>
<div class='layui-table'>
<table id='table' class='layui-table ' align='center'>
<thead>
<tr align='center'>
<td>问卷ID</td>
<td>问卷标题</td>
<td>问卷状态</td>
<td>操作</td>
</tr>
</thead>
</table>
</div>
<div class='modal fade ' id='myModal1' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog' style='width: 800px'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
<h2 class='modal-title' id='myModalLabel1' style='color:red'>为【<input type='text' id='tm'
                                                                                       style='border: none;'
                                                                                       disabled='disabled'>】统计结果
</h2>
</div>
<div class='modal-body'>
<h3>
<table id='tab'>
</table>
</h3>
<p><br><br><br></p>
<p><button id='tjwt' type='button' class='layui-btn layui-btn-warm '>提交</button></p>
</div>
<div class='modal-footer'>
<p><button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button></p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div class='modal fade ' id='myModal2' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog' style='width: 800px'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
<h2 class='modal-title' id='myModalLabel2' style='color:red'>为【<input type='text' id='ttt'
                                                                                       style='border: none;'
                                                                                       disabled='disabled'>】统计结果
</h2>
<button id='bzt' type='button' class='layui-btn layui-btn-warm'>生成饼状图</button>
<button id='xq' type='button' class='layui-btn layui-btn-warm'>详情</button>
</div>
<div class='modal-body'>
<div id='content1'>
<h3>
<table id='tabl'>
</table>
</h3>
</div>
<div id='content2' style='display: none;'>
<div id='main' style='width: 600px;height:400px;'></div>
</div>
</div>
<div class='modal-footer'>
<p><button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button></p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>