feat: 健康排查模块列表调整+详情页重构+跳转tab联动+新增活动管理+去侧栏图标
- archive-personal.html: 健康排查列改为应参加/已参加/未参加，>0红色 - archive-unit.html: 健康排查列改为活动次数/未参加人数，wrapLink添加tab参数 - archive-personal-detail.html: 健康排查tab改为活动列表+问卷详情弹窗 - archive-unit-health-checkup-detail.html: 重写为活动列表+未参加员工双Tab - 4个详情页: 根据URL tab参数自动切换对应tab面板 - 7个页面: 去除侧边栏菜单图标 - 新增: activity-manage/edit/detail/stat + survey-edit/manage Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
89f0744749
commit
c634c3295e
@@ -503,6 +503,18 @@ document.getElementById('unitDept').textContent = displayName;
|
||||
document.getElementById('detailTitle').textContent = displayName + ' — 健康环境 详情';
|
||||
document.getElementById('detailMeta').textContent = '2026年 · 设备总数 39';
|
||||
|
||||
// 根据URL参数自动切换tab
|
||||
var tab = getUrlParam('tab');
|
||||
if(tab){
|
||||
var items = document.querySelectorAll('.tab-item');
|
||||
for(var i=0;i<items.length;i++){
|
||||
if(items[i].getAttribute('onclick') && items[i].getAttribute('onclick').indexOf(tab) > -1){
|
||||
items[i].click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [交互] 设备类型与监测类型联动
|
||||
var monitorTypeMap = {
|
||||
'室内设备': ['全部','PM2.5','甲醛','CO2','温度','湿度','TVOC'],
|
||||
|
||||
@@ -739,6 +739,12 @@ function resetPendingEmpFilter(){
|
||||
document.getElementById('bcUnit').textContent = displayName;
|
||||
renderActivityList(activities);
|
||||
renderPendingEmpTable(buildPendingEmpList());
|
||||
// 根据URL参数自动切换tab
|
||||
var tab = getUrlParam('tab');
|
||||
if(tab){
|
||||
var target = document.querySelector('.tab-item[data-tab="'+tab+'"], .tab-item[onclick*="'+tab+'"]');
|
||||
if(target) target.click();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -480,6 +480,18 @@ var displayName = unit + (dept ? ' - ' + dept : '');
|
||||
document.getElementById('unitDept').textContent = displayName;
|
||||
document.getElementById('detailTitle').textContent = displayName + ' — 穿戴监测 详情';
|
||||
document.getElementById('detailMeta').textContent = '2026年 · 总设备数 90';
|
||||
|
||||
// 根据URL参数自动切换tab
|
||||
var tab = getUrlParam('tab');
|
||||
if(tab){
|
||||
var items = document.querySelectorAll('.tab-item');
|
||||
for(var i=0;i<items.length;i++){
|
||||
if(items[i].getAttribute('onclick') && items[i].getAttribute('onclick').indexOf(tab) > -1){
|
||||
items[i].click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -526,6 +526,18 @@ var displayName = unit + (dept ? ' - ' + dept : '');
|
||||
document.getElementById('unitDept').textContent = displayName;
|
||||
document.getElementById('detailTitle').textContent = displayName + ' — 体重监测 详情';
|
||||
document.getElementById('detailMeta').textContent = '2026年 · 总人数 90';
|
||||
|
||||
// 根据URL参数自动切换tab
|
||||
var tab = getUrlParam('tab');
|
||||
if(tab){
|
||||
var items = document.querySelectorAll('.tab-item');
|
||||
for(var i=0;i<items.length;i++){
|
||||
if(items[i].getAttribute('onclick') && items[i].getAttribute('onclick').indexOf(tab) > -1){
|
||||
items[i].click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -171,13 +171,14 @@ tbody tr.stat-row:hover{background:#E6F0FF;}
|
||||
<tr>
|
||||
<th rowspan="2">单位名称</th>
|
||||
<th rowspan="2">总人数</th>
|
||||
<th>健康排查</th>
|
||||
<th colspan="2">健康排查</th>
|
||||
<th colspan="4">穿戴监测</th>
|
||||
<th colspan="5">体重监测</th>
|
||||
<th colspan="5">环境监测</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>活动次数 ↕</th>
|
||||
<th>未参加人数 ↕</th>
|
||||
<th>入库设备数 ↕</th>
|
||||
<th>分配设备数 ↕</th>
|
||||
<th>告警次数 ↕</th>
|
||||
@@ -196,13 +197,13 @@ tbody tr.stat-row:hover{background:#E6F0FF;}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="stat-row">
|
||||
<td>统计行</td><td>1,280</td><td>5</td><td>1,280</td><td>1,147</td><td>45</td><td>27</td><td>1,147</td><td>244</td><td>129</td><td>86</td><td>53</td><td>80</td><td>25</td><td>12</td><td>6</td><td>12</td>
|
||||
<td>统计行</td><td>1,280</td><td>5</td><td>133</td><td>1,280</td><td>1,147</td><td>45</td><td>27</td><td>1,147</td><td>244</td><td>129</td><td>86</td><td>53</td><td>80</td><td>25</td><td>12</td><td>6</td><td>12</td>
|
||||
</tr>
|
||||
<tr><td>采油一厂</td><td>420</td><td>5</td><td>420</td><td>398</td><td>12</td><td>8</td><td>398</td><td>85</td><td>42</td><td>28</td><td>15</td><td>24</td><td>8</td><td>4</td><td>2</td><td>3</td></tr>
|
||||
<tr><td>采油二厂</td><td>380</td><td>5</td><td>380</td><td>356</td><td>18</td><td>12</td><td>356</td><td>76</td><td>38</td><td>25</td><td>18</td><td>20</td><td>6</td><td>3</td><td>2</td><td>5</td></tr>
|
||||
<tr><td>采气一厂</td><td>260</td><td>4</td><td>260</td><td>245</td><td>8</td><td>5</td><td>245</td><td>52</td><td>26</td><td>18</td><td>12</td><td>16</td><td>5</td><td>2</td><td>1</td><td>2</td></tr>
|
||||
<tr><td>能源总部机关</td><td>150</td><td>5</td><td>150</td><td>148</td><td>4</td><td>2</td><td>148</td><td>32</td><td>16</td><td>10</td><td>5</td><td>12</td><td>4</td><td>2</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>勘探开发研究院</td><td>70</td><td>3</td><td>70</td><td>65</td><td>3</td><td>2</td><td>65</td><td>14</td><td>7</td><td>5</td><td>3</td><td>8</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油一厂</td><td>420</td><td>5</td><td>22</td><td>420</td><td>398</td><td>12</td><td>8</td><td>398</td><td>85</td><td>42</td><td>28</td><td>15</td><td>24</td><td>8</td><td>4</td><td>2</td><td>3</td></tr>
|
||||
<tr><td>采油二厂</td><td>380</td><td>5</td><td>24</td><td>380</td><td>356</td><td>18</td><td>12</td><td>356</td><td>76</td><td>38</td><td>25</td><td>18</td><td>20</td><td>6</td><td>3</td><td>2</td><td>5</td></tr>
|
||||
<tr><td>采气一厂</td><td>260</td><td>4</td><td>15</td><td>260</td><td>245</td><td>8</td><td>5</td><td>245</td><td>52</td><td>26</td><td>18</td><td>12</td><td>16</td><td>5</td><td>2</td><td>1</td><td>2</td></tr>
|
||||
<tr><td>能源总部机关</td><td>150</td><td>5</td><td>2</td><td>150</td><td>148</td><td>4</td><td>2</td><td>148</td><td>32</td><td>16</td><td>10</td><td>5</td><td>12</td><td>4</td><td>2</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>勘探开发研究院</td><td>70</td><td>3</td><td>5</td><td>70</td><td>65</td><td>3</td><td>2</td><td>65</td><td>14</td><td>7</td><td>5</td><td>3</td><td>8</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -224,13 +225,14 @@ tbody tr.stat-row:hover{background:#E6F0FF;}
|
||||
<th rowspan="2">单位名称</th>
|
||||
<th rowspan="2">部门名称</th>
|
||||
<th rowspan="2">总人数</th>
|
||||
<th>健康排查</th>
|
||||
<th colspan="2">健康排查</th>
|
||||
<th colspan="4">穿戴监测</th>
|
||||
<th colspan="5">体重监测</th>
|
||||
<th colspan="5">环境监测</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>活动次数 ↕</th>
|
||||
<th>未参加人数 ↕</th>
|
||||
<th>入库设备数 ↕</th>
|
||||
<th>分配设备数 ↕</th>
|
||||
<th>异常次数 ↕</th>
|
||||
@@ -249,13 +251,13 @@ tbody tr.stat-row:hover{background:#E6F0FF;}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="stat-row">
|
||||
<td>统计行</td><td>—</td><td>405</td><td>5</td><td>405</td><td>384</td><td>14</td><td>8</td><td>384</td><td>82</td><td>41</td><td>27</td><td>15</td><td>24</td><td>8</td><td>4</td><td>4</td><td>5</td>
|
||||
<td>统计行</td><td>—</td><td>405</td><td>5</td><td>21</td><td>405</td><td>384</td><td>14</td><td>8</td><td>384</td><td>82</td><td>41</td><td>27</td><td>15</td><td>24</td><td>8</td><td>4</td><td>4</td><td>5</td>
|
||||
</tr>
|
||||
<tr><td>采油一厂</td><td>研发部</td><td>85</td><td>5</td><td>85</td><td>82</td><td>2</td><td>1</td><td>82</td><td>18</td><td>9</td><td>6</td><td>3</td><td>6</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油一厂</td><td>运营部</td><td>120</td><td>4</td><td>120</td><td>112</td><td>5</td><td>3</td><td>112</td><td>24</td><td>12</td><td>8</td><td>5</td><td>8</td><td>3</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油一厂</td><td>市场部</td><td>95</td><td>5</td><td>95</td><td>90</td><td>3</td><td>2</td><td>90</td><td>19</td><td>10</td><td>6</td><td>4</td><td>6</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油二厂</td><td>财务部</td><td>60</td><td>3</td><td>60</td><td>58</td><td>2</td><td>1</td><td>58</td><td>12</td><td>6</td><td>4</td><td>2</td><td>4</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油二厂</td><td>人事部</td><td>45</td><td>3</td><td>45</td><td>42</td><td>2</td><td>1</td><td>42</td><td>9</td><td>5</td><td>3</td><td>2</td><td>3</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油一厂</td><td>研发部</td><td>85</td><td>5</td><td>3</td><td>85</td><td>82</td><td>2</td><td>1</td><td>82</td><td>18</td><td>9</td><td>6</td><td>3</td><td>6</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油一厂</td><td>运营部</td><td>120</td><td>4</td><td>8</td><td>120</td><td>112</td><td>5</td><td>3</td><td>112</td><td>24</td><td>12</td><td>8</td><td>5</td><td>8</td><td>3</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油一厂</td><td>市场部</td><td>95</td><td>5</td><td>5</td><td>95</td><td>90</td><td>3</td><td>2</td><td>90</td><td>19</td><td>10</td><td>6</td><td>4</td><td>6</td><td>2</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油二厂</td><td>财务部</td><td>60</td><td>3</td><td>2</td><td>60</td><td>58</td><td>2</td><td>1</td><td>58</td><td>12</td><td>6</td><td>4</td><td>2</td><td>4</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
<tr><td>采油二厂</td><td>人事部</td><td>45</td><td>3</td><td>3</td><td>45</td><td>42</td><td>2</td><td>1</td><td>42</td><td>9</td><td>5</td><td>3</td><td>2</td><td>3</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -312,41 +314,62 @@ function switchTab(idx) {
|
||||
|
||||
// 二级单位表格
|
||||
if(tableIdx === 0){
|
||||
// 健康排查列 (2): 活动次数
|
||||
wrapLink(cells[2], 'archive-unit-health-checkup-detail.html?unit=' + encodeURIComponent(unitName));
|
||||
// 穿戴监测列 (3-6): 入库、分配、告警次数、告警人数
|
||||
for(var i = 3; i <= 6; i++){
|
||||
wrapLink(cells[i], 'archive-unit-wearable-detail.html?unit=' + encodeURIComponent(unitName));
|
||||
}
|
||||
// 体重监测列 (7-11): 体重秤、蓝牙称、体脂仪、运动器械、BMI异常
|
||||
for(var i = 7; i <= 11; i++){
|
||||
wrapLink(cells[i], 'archive-unit-weight-detail.html?unit=' + encodeURIComponent(unitName));
|
||||
}
|
||||
// 环境监测列 (12-16): 室内、室外、水质、花粉、报警
|
||||
for(var i = 12; i <= 16; i++){
|
||||
wrapLink(cells[i], 'archive-unit-environment-detail.html?unit=' + encodeURIComponent(unitName));
|
||||
}
|
||||
// 健康排查列 (2-3): 活动次数、未参加人数
|
||||
var hcBase = 'archive-unit-health-checkup-detail.html?unit=' + encodeURIComponent(unitName);
|
||||
wrapLink(cells[2], hcBase + '&tab=activity-list');
|
||||
wrapLink(cells[3], hcBase + '&tab=pending-emp');
|
||||
// 穿戴监测列 (4-7): 入库、分配、告警次数、告警人数
|
||||
var wearableBase = 'archive-unit-wearable-detail.html?unit=' + encodeURIComponent(unitName);
|
||||
wrapLink(cells[4], wearableBase + '&tab=inbound');
|
||||
wrapLink(cells[5], wearableBase + '&tab=allocated');
|
||||
wrapLink(cells[6], wearableBase + '&tab=exception-times');
|
||||
wrapLink(cells[7], wearableBase + '&tab=exception-people');
|
||||
// 体重监测列 (8-12): 体重秤、蓝牙称、体脂仪、运动器械、BMI异常
|
||||
var weightBase = 'archive-unit-weight-detail.html?unit=' + encodeURIComponent(unitName);
|
||||
wrapLink(cells[8], weightBase + '&tab=scale');
|
||||
wrapLink(cells[9], weightBase + '&tab=bluetooth');
|
||||
wrapLink(cells[10], weightBase + '&tab=analyzer');
|
||||
wrapLink(cells[11], weightBase + '&tab=equipment');
|
||||
wrapLink(cells[12], weightBase + '&tab=overweight');
|
||||
// 环境监测列 (13-17): 室内、室外、水质、花粉、报警
|
||||
var envBase = 'archive-unit-environment-detail.html?unit=' + encodeURIComponent(unitName);
|
||||
wrapLink(cells[13], envBase + '&tab=indoor');
|
||||
wrapLink(cells[14], envBase + '&tab=outdoor');
|
||||
wrapLink(cells[15], envBase + '&tab=water');
|
||||
wrapLink(cells[16], envBase + '&tab=pollen');
|
||||
wrapLink(cells[17], envBase + '&tab=alarm');
|
||||
}
|
||||
// 三级单位表格
|
||||
else if(tableIdx === 1){
|
||||
var deptName = cells[0].textContent;
|
||||
var unitCell = cells[1];
|
||||
var unitNameFromCell = unitCell.textContent;
|
||||
var q = '&dept=' + encodeURIComponent(deptName);
|
||||
|
||||
// 健康排查列 (3): 活动次数
|
||||
wrapLink(cells[3], 'archive-unit-health-checkup-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + '&dept=' + encodeURIComponent(deptName));
|
||||
// 穿戴监测列 (4-7): 入库、分配、异常次数、异常人数
|
||||
for(var i = 4; i <= 7; i++){
|
||||
wrapLink(cells[i], 'archive-unit-wearable-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + '&dept=' + encodeURIComponent(deptName));
|
||||
}
|
||||
// 体重监测列 (8-12): 体重秤、蓝牙称、体脂仪、运动器械、BMI异常
|
||||
for(var i = 8; i <= 12; i++){
|
||||
wrapLink(cells[i], 'archive-unit-weight-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + '&dept=' + encodeURIComponent(deptName));
|
||||
}
|
||||
// 环境监测列 (13-17): 室内、室外、水质、花粉、报警
|
||||
for(var i = 13; i <= 17; i++){
|
||||
wrapLink(cells[i], 'archive-unit-environment-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + '&dept=' + encodeURIComponent(deptName));
|
||||
}
|
||||
// 健康排查列 (3-4): 活动次数、未参加人数
|
||||
var hcBase = 'archive-unit-health-checkup-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + q;
|
||||
wrapLink(cells[3], hcBase + '&tab=activity-list');
|
||||
wrapLink(cells[4], hcBase + '&tab=pending-emp');
|
||||
// 穿戴监测列 (5-8): 入库、分配、异常次数、异常人数
|
||||
var wearableBase = 'archive-unit-wearable-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + q;
|
||||
wrapLink(cells[5], wearableBase + '&tab=inbound');
|
||||
wrapLink(cells[6], wearableBase + '&tab=allocated');
|
||||
wrapLink(cells[7], wearableBase + '&tab=exception-times');
|
||||
wrapLink(cells[8], wearableBase + '&tab=exception-people');
|
||||
// 体重监测列 (9-13): 体重秤、蓝牙称、体脂仪、运动器械、BMI异常
|
||||
var weightBase = 'archive-unit-weight-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + q;
|
||||
wrapLink(cells[9], weightBase + '&tab=scale');
|
||||
wrapLink(cells[10], weightBase + '&tab=bluetooth');
|
||||
wrapLink(cells[11], weightBase + '&tab=analyzer');
|
||||
wrapLink(cells[12], weightBase + '&tab=equipment');
|
||||
wrapLink(cells[13], weightBase + '&tab=overweight');
|
||||
// 环境监测列 (14-18): 室内、室外、水质、花粉、报警
|
||||
var envBase = 'archive-unit-environment-detail.html?unit=' + encodeURIComponent(unitNameFromCell) + q;
|
||||
wrapLink(cells[14], envBase + '&tab=indoor');
|
||||
wrapLink(cells[15], envBase + '&tab=outdoor');
|
||||
wrapLink(cells[16], envBase + '&tab=water');
|
||||
wrapLink(cells[17], envBase + '&tab=pollen');
|
||||
wrapLink(cells[18], envBase + '&tab=alarm');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -174,16 +174,17 @@
|
||||
<th rowspan="2" style="min-width:110px;">设备编码</th>
|
||||
<th rowspan="2" style="min-width:90px;">所属单位</th>
|
||||
<th rowspan="2" style="min-width:130px;">设备位置</th>
|
||||
<th colspan="7">移动端点击次数</th>
|
||||
<th colspan="8">移动端点击次数</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th-sort" data-col="4" onclick="sortTable(this)">温度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="5" onclick="sortTable(this)">湿度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="6" onclick="sortTable(this)">CO₂<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="7" onclick="sortTable(this)">甲醛<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="8" onclick="sortTable(this)">PM2.5<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="9" onclick="sortTable(this)">PM10<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="10" onclick="sortTable(this)">总点击次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th>设备详情</th>
|
||||
<th class="th-sort" data-col="5" onclick="sortTable(this)">温度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="6" onclick="sortTable(this)">湿度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="7" onclick="sortTable(this)">CO₂<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="8" onclick="sortTable(this)">甲醛<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="9" onclick="sortTable(this)">PM2.5<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="10" onclick="sortTable(this)">PM10<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="11" onclick="sortTable(this)">总点击次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -192,6 +193,7 @@
|
||||
<td>IA-2024-001</td>
|
||||
<td>采油一厂</td>
|
||||
<td>办公楼1层大厅</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>326</td><td>218</td><td>185</td><td>412</td><td>538</td><td>295</td><td>1974</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -199,6 +201,7 @@
|
||||
<td>IA-2024-002</td>
|
||||
<td>采油一厂</td>
|
||||
<td>办公楼2层会议室</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>142</td><td>98</td><td>76</td><td>203</td><td>687</td><td>345</td><td>1551</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -206,6 +209,7 @@
|
||||
<td>IA-2024-003</td>
|
||||
<td>采油二厂</td>
|
||||
<td>新装修办公室3层</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>89</td><td>56</td><td>112</td><td>856</td><td>234</td><td>128</td><td>1475</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -213,6 +217,7 @@
|
||||
<td>IA-2024-004</td>
|
||||
<td>采油二厂</td>
|
||||
<td>地下车库B1层</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>67</td><td>45</td><td>523</td><td>38</td><td>156</td><td>89</td><td>918</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -220,6 +225,7 @@
|
||||
<td>IA-2024-005</td>
|
||||
<td>采油三厂</td>
|
||||
<td>生产车间1号</td>
|
||||
<td><a href="indoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>458</td><td>312</td><td>267</td><td>189</td><td>723</td><td>456</td><td>2405</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -605,7 +605,7 @@ function getDominantLevel(bd){
|
||||
return max;
|
||||
}
|
||||
|
||||
/* 柱状图 Tip - 仅显示主导等级 */
|
||||
/* 柱状图 Tip - 显示等级占比 */
|
||||
function showBarTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
@@ -613,12 +613,24 @@ function showBarTip(e, el){
|
||||
var bd = td.barData[idx];
|
||||
if(!bd) return;
|
||||
var dateStr = td.labels[idx] || '';
|
||||
var dom = getDominantLevel(bd);
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
document.getElementById('tooltipBody').innerHTML = '<div class="chart-tooltip__row">' +
|
||||
'<span class="chart-tooltip__dot" style="background:'+dom.color+'"></span>' +
|
||||
'<span class="chart-tooltip__label">等级</span>' +
|
||||
'<span class="chart-tooltip__val">'+dom.name+'</span></div>';
|
||||
var rows = '';
|
||||
var levels = [
|
||||
{name:'清洁', color:'#13C2C2', val:bd.clean},
|
||||
{name:'未污染', color:'#52C41A', val:bd.good},
|
||||
{name:'轻污染', color:'#FAAD14', val:bd.light},
|
||||
{name:'中污染', color:'#FA541C', val:bd.moderate},
|
||||
{name:'重污染', color:'#FF4D4F', val:bd.heavy}
|
||||
];
|
||||
for(var i = 0; i < levels.length; i++){
|
||||
var lv = levels[i];
|
||||
var pct = Math.round(lv.val / 24 * 100);
|
||||
rows += '<div class="chart-tooltip__row">' +
|
||||
'<span class="chart-tooltip__dot" style="background:'+lv.color+'"></span>' +
|
||||
'<span class="chart-tooltip__label">'+lv.name+'</span>' +
|
||||
'<span class="chart-tooltip__val">'+pct+'%</span></div>';
|
||||
}
|
||||
document.getElementById('tooltipBody').innerHTML = rows;
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
|
||||
@@ -163,38 +163,44 @@
|
||||
<th rowspan="2" style="min-width:110px;">设备编码</th>
|
||||
<th rowspan="2" style="min-width:90px;">所属单位</th>
|
||||
<th rowspan="2" style="min-width:120px;">设备位置</th>
|
||||
<th colspan="8">移动端点击次数</th>
|
||||
<th colspan="9">移动端点击次数</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th-sort" data-col="4" onclick="sortTable(this)">温度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="5" onclick="sortTable(this)">湿度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="6" onclick="sortTable(this)">太阳辐射<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="7" onclick="sortTable(this)">PM2.5<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="8" onclick="sortTable(this)">PM10<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="9" onclick="sortTable(this)">照度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="10" onclick="sortTable(this)">风速<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="11" onclick="sortTable(this)">总点击次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th>设备详情</th>
|
||||
<th class="th-sort" data-col="5" onclick="sortTable(this)">温度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="6" onclick="sortTable(this)">湿度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="7" onclick="sortTable(this)">太阳辐射<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="8" onclick="sortTable(this)">PM2.5<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="9" onclick="sortTable(this)">PM10<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="10" onclick="sortTable(this)">照度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="11" onclick="sortTable(this)">风速<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="12" onclick="sortTable(this)">总点击次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td-left">空气质量监测站-A01</td><td>OA-2024-001</td><td>采油一厂</td><td>厂区大门东侧</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>285</td><td>196</td><td>78</td><td>523</td><td>412</td><td>65</td><td>134</td><td>1693</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">PM10检测仪-B02</td><td>OA-2024-002</td><td>采油一厂</td><td>生产区北围栏</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>156</td><td>112</td><td>45</td><td>687</td><td>534</td><td>38</td><td>89</td><td>1661</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">臭氧检测仪-C01</td><td>OA-2024-003</td><td>采油二厂</td><td>办公楼楼顶</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>98</td><td>76</td><td>123</td><td>345</td><td>267</td><td>108</td><td>56</td><td>1073</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">气象参数监测仪-D01</td><td>OA-2024-004</td><td>采油三厂</td><td>气象观测场</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>412</td><td>328</td><td>256</td><td>189</td><td>145</td><td>215</td><td>367</td><td>1912</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">空气质量监测站-A03</td><td>OA-2024-005</td><td>采油三厂</td><td>储油罐区南侧</td>
|
||||
<td><a href="outdoor-device-list.html" class="link">设备详情</a></td>
|
||||
<td>234</td><td>178</td><td>92</td><td>456</td><td>389</td><td>87</td><td>145</td><td>1581</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -561,7 +561,7 @@ function getDominantLevel(bd){
|
||||
return max;
|
||||
}
|
||||
|
||||
/* 柱状图 Tip - 仅显示主导等级 */
|
||||
/* 柱状图 Tip - 显示等级占比 */
|
||||
function showBarTip(e, el){
|
||||
var td = window._chartTooltipData;
|
||||
if(!td) return;
|
||||
@@ -569,12 +569,25 @@ function showBarTip(e, el){
|
||||
var bd = td.barData[idx];
|
||||
if(!bd) return;
|
||||
var dateStr = td.labels[idx] || '';
|
||||
var dom = getDominantLevel(bd);
|
||||
document.getElementById('tooltipDate').textContent = dateStr;
|
||||
document.getElementById('tooltipBody').innerHTML = '<div class="chart-tooltip__row">' +
|
||||
'<span class="chart-tooltip__dot" style="background:'+dom.color+'"></span>' +
|
||||
'<span class="chart-tooltip__label">等级</span>' +
|
||||
'<span class="chart-tooltip__val">'+dom.name+'</span></div>';
|
||||
var rows = '';
|
||||
var levels = [
|
||||
{name:'优', color:'#52C41A', val:bd.excellent},
|
||||
{name:'良', color:'#13C2C2', val:bd.good},
|
||||
{name:'轻度污染', color:'#FAAD14', val:bd.light},
|
||||
{name:'中度污染', color:'#FA541C', val:bd.moderate},
|
||||
{name:'重度污染', color:'#FF4D4F', val:bd.heavy},
|
||||
{name:'严重污染', color:'#722ED1', val:bd.severe}
|
||||
];
|
||||
for(var i = 0; i < levels.length; i++){
|
||||
var lv = levels[i];
|
||||
var pct = Math.round(lv.val / 24 * 100);
|
||||
rows += '<div class="chart-tooltip__row">' +
|
||||
'<span class="chart-tooltip__dot" style="background:'+lv.color+'"></span>' +
|
||||
'<span class="chart-tooltip__label">'+lv.name+'</span>' +
|
||||
'<span class="chart-tooltip__val">'+pct+'%</span></div>';
|
||||
}
|
||||
document.getElementById('tooltipBody').innerHTML = rows;
|
||||
var tip = document.getElementById('chartTooltip');
|
||||
tip.classList.add('show');
|
||||
var rect = el.getBoundingClientRect();
|
||||
|
||||
@@ -163,40 +163,46 @@
|
||||
<th rowspan="2" style="min-width:110px;">设备编码</th>
|
||||
<th rowspan="2" style="min-width:90px;">所属单位</th>
|
||||
<th rowspan="2" style="min-width:120px;">设备位置</th>
|
||||
<th colspan="10">移动端点击次数</th>
|
||||
<th colspan="11">移动端点击次数</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th-sort" data-col="4" onclick="sortTable(this)">榆属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="5" onclick="sortTable(this)">松属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="6" onclick="sortTable(this)">杨属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="7" onclick="sortTable(this)">柏科<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="8" onclick="sortTable(this)">柳属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="9" onclick="sortTable(this)">蒿属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="10" onclick="sortTable(this)">藜科<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="11" onclick="sortTable(this)">苋科<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="12" onclick="sortTable(this)">花粉总数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="13" onclick="sortTable(this)">总点击次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th>设备详情</th>
|
||||
<th class="th-sort" data-col="5" onclick="sortTable(this)">榆属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="6" onclick="sortTable(this)">松属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="7" onclick="sortTable(this)">杨属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="8" onclick="sortTable(this)">柏科<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="9" onclick="sortTable(this)">柳属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="10" onclick="sortTable(this)">蒿属<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="11" onclick="sortTable(this)">藜科<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="12" onclick="sortTable(this)">苋科<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="13" onclick="sortTable(this)">花粉总数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="14" onclick="sortTable(this)">总点击次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td-left">花粉采样器-A01</td><td>PL-2024-001</td><td>采油一厂</td><td>办公区绿化带</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>123</td><td>89</td><td>256</td><td>67</td><td>145</td><td>78</td><td>34</td><td>28</td><td>312</td><td>1132</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">花粉浓度监测仪-B01</td><td>PL-2024-002</td><td>采油一厂</td><td>厂区东侧林带</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>198</td><td>156</td><td>423</td><td>112</td><td>234</td><td>145</td><td>56</td><td>42</td><td>478</td><td>1844</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">花粉自动计数仪-C01</td><td>PL-2024-003</td><td>采油二厂</td><td>生活区花园</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>267</td><td>178</td><td>345</td><td>98</td><td>189</td><td>212</td><td>78</td><td>56</td><td>534</td><td>1957</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">综合气象花粉站-D01</td><td>PL-2024-004</td><td>采油二厂</td><td>气象观测场</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>345</td><td>234</td><td>512</td><td>156</td><td>278</td><td>189</td><td>98</td><td>67</td><td>623</td><td>2502</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">花粉采样器-A03</td><td>PL-2024-005</td><td>采油三厂</td><td>杨树林防护带</td>
|
||||
<td><a href="pollen-device-list.html" class="link">设备详情</a></td>
|
||||
<td>412</td><td>298</td><td>678</td><td>189</td><td>356</td><td>234</td><td>112</td><td>89</td><td>756</td><td>3124</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -163,37 +163,43 @@
|
||||
<th rowspan="2" style="min-width:110px;">设备编码</th>
|
||||
<th rowspan="2" style="min-width:90px;">所属单位</th>
|
||||
<th rowspan="2" style="min-width:120px;">设备位置</th>
|
||||
<th colspan="7">移动端点击次数</th>
|
||||
<th colspan="8">移动端点击次数</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th-sort" data-col="4" onclick="sortTable(this)">温度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="5" onclick="sortTable(this)">电导率<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="6" onclick="sortTable(this)">PH<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="7" onclick="sortTable(this)">盐度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="8" onclick="sortTable(this)">电阻率<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="9" onclick="sortTable(this)">TDS<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="10" onclick="sortTable(this)">总点击次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th>设备详情</th>
|
||||
<th class="th-sort" data-col="5" onclick="sortTable(this)">温度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="6" onclick="sortTable(this)">电导率<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="7" onclick="sortTable(this)">PH<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="8" onclick="sortTable(this)">盐度<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="9" onclick="sortTable(this)">电阻率<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="10" onclick="sortTable(this)">TDS<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
<th class="th-sort" data-col="11" onclick="sortTable(this)">总点击次数<span class="sort-icon"><span class="arrow-up"></span><span class="arrow-down"></span></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td-left">多参数水质分析仪-A01</td><td>WQ-2024-001</td><td>采油一厂</td><td>生活区供水站</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>312</td><td>245</td><td>478</td><td>156</td><td>89</td><td>203</td><td>1483</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">在线PH计-B02</td><td>WQ-2024-002</td><td>采油一厂</td><td>污水处理站出口</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>178</td><td>134</td><td>623</td><td>98</td><td>67</td><td>145</td><td>1245</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">电导率监测仪-C01</td><td>WQ-2024-003</td><td>采油二厂</td><td>注水站入口</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>95</td><td>567</td><td>112</td><td>234</td><td>189</td><td>78</td><td>1275</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">TDS检测仪-D01</td><td>WQ-2024-004</td><td>采油二厂</td><td>生产区储水池</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>145</td><td>198</td><td>267</td><td>112</td><td>76</td><td>534</td><td>1332</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-left">多参数水质分析仪-A03</td><td>WQ-2024-005</td><td>采油三厂</td><td>排污口监测点</td>
|
||||
<td><a href="water-device-list.html" class="link">设备详情</a></td>
|
||||
<td>256</td><td>312</td><td>345</td><td>189</td><td>123</td><td>278</td><td>1503</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -0,0 +1,736 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 活动详情 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);padding-bottom:40px;}
|
||||
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{text-decoration:underline;}
|
||||
|
||||
/* 基本信息卡片 */
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px 32px;margin-bottom:20px;}
|
||||
.info-card__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border);}
|
||||
.info-card__title{font-size:var(--font-lg);font-weight:600;display:flex;align-items:center;gap:8px;}
|
||||
.info-card__title svg{width:20px;height:20px;color:var(--primary);}
|
||||
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 32px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.info-item__half{grid-column:span 2;}
|
||||
.info-item__full{grid-column:span 4;}
|
||||
.info-item__half .info-item__value,.info-item__full .info-item__value{line-height:1.6;}
|
||||
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
|
||||
/* Tab 切换 */
|
||||
.tab-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.tab-header{display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 24px;}
|
||||
.tab-item{padding:14px 24px;font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;user-select:none;display:flex;align-items:center;gap:6px;}
|
||||
.tab-item:hover{color:var(--text-primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-item .tab-count{font-size:var(--font-xs);padding:1px 8px;border-radius:10px;background:#F5F5F5;color:var(--text-secondary);font-weight:400;}
|
||||
.tab-item.active .tab-count{background:var(--primary-light);color:var(--primary);}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{display:flex;align-items:center;gap:12px;padding:16px 24px;flex-wrap:wrap;border-bottom:1px solid var(--border);}
|
||||
.filter-item{display:flex;align-items:center;gap:6px;}
|
||||
.filter-item__label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input-sm{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-xs);outline:none;min-width:140px;}
|
||||
.filter-input-sm:focus{border-color:var(--primary);}
|
||||
.filter-select-sm{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-xs);outline:none;min-width:140px;background:#fff;cursor:pointer;}
|
||||
.filter-select-sm:focus{border-color:var(--primary);}
|
||||
.btn{height:32px;padding:0 12px;border-radius:var(--radius-sm);font-size:var(--font-xs);cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text-primary);transition:all .15s;display:inline-flex;align-items:center;gap:4px;}
|
||||
.btn:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.btn-primary:hover{background:#40a9ff;border-color:#40a9ff;color:#fff;}
|
||||
|
||||
/* 表格 */
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:10px 16px;text-align:left;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:12px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;background:none;border:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 24px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.pagination__pages{display:flex;align-items:center;gap:4px;}
|
||||
.page-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;}
|
||||
.page-item:hover{color:var(--primary);}
|
||||
.page-item.active{background:var(--primary);color:#fff;}
|
||||
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s;}
|
||||
.modal-mask.show{opacity:1;pointer-events:auto;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.modal__header h3{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:20px;color:var(--text-secondary);border-radius:var(--radius-sm);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
|
||||
/* 问卷预览 */
|
||||
.preview-survey{margin-bottom:20px;}
|
||||
.preview-survey__name{font-size:var(--font-base);font-weight:600;padding:10px 16px;background:#F5F7FA;border-radius:var(--radius-sm);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
|
||||
.preview-survey__name svg{width:16px;height:16px;color:var(--primary);}
|
||||
.preview-q{padding:12px 16px;background:#FAFAFA;border-radius:var(--radius-sm);margin-bottom:8px;}
|
||||
.preview-q__title{font-size:var(--font-sm);font-weight:500;margin-bottom:8px;}
|
||||
.preview-q__opts{display:flex;flex-direction:column;gap:6px;padding-left:4px;}
|
||||
.preview-q__opt{font-size:var(--font-sm);color:var(--text-secondary);display:flex;align-items:center;gap:8px;padding:2px 0;}
|
||||
.preview-q__opt.selected{color:var(--primary);font-weight:500;}
|
||||
.preview-q__opt .q-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;transition:border-color .15s;}
|
||||
.preview-q__opt.selected .q-radio{border-color:var(--primary);}
|
||||
.preview-q__opt.selected .q-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--primary);}
|
||||
.preview-q__opt .q-check{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--border);flex-shrink:0;transition:all .15s;}
|
||||
.preview-q__opt.selected .q-check{background:var(--primary);border-color:var(--primary);}
|
||||
.preview-q__opt.selected .q-check::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px;}
|
||||
.preview-q__answer{font-size:var(--font-sm);color:var(--primary);padding-left:4px;}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state{text-align:center;padding:40px 20px;color:var(--text-placeholder);}
|
||||
.empty-state svg{width:64px;height:64px;margin-bottom:12px;opacity:0.3;}
|
||||
.empty-state__title{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="../archive-personal.html">档案</a>
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item active" id="sidebarActManage">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item" id="sidebarActStat">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb" id="breadcrumb">
|
||||
<a href="activity-manage.html">活动管理</a>
|
||||
<span>/</span>
|
||||
<span>活动详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息卡片 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__header">
|
||||
<div class="info-card__title">
|
||||
<svg viewBox="0 0 20 20" fill="none"><rect x="3" y="2" width="14" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M7 6h6M7 9h4M7 12h5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-grid" id="infoGrid"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tab-card">
|
||||
<div class="tab-header">
|
||||
<div class="tab-item active" data-tab="done" onclick="switchTab('done')">
|
||||
已参加人员
|
||||
<span class="tab-count" id="doneCount">0</span>
|
||||
</div>
|
||||
<div class="tab-item" data-tab="pending" onclick="switchTab('pending')">
|
||||
未参加人员
|
||||
<span class="tab-count" id="pendingCount">0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已参加人员 Tab -->
|
||||
<div id="tabDone">
|
||||
<!-- 筛选 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">单位/部门</span>
|
||||
<select class="filter-select-sm" id="doneDept">
|
||||
<option value="">全部</option>
|
||||
<option value="能源集团/人力资源部">能源集团/人力资源部</option>
|
||||
<option value="能源集团/安全环保部">能源集团/安全环保部</option>
|
||||
<option value="能源集团/工会">能源集团/工会</option>
|
||||
<option value="能源集团/生产技术部">能源集团/生产技术部</option>
|
||||
<option value="能源集团/财务部">能源集团/财务部</option>
|
||||
<option value="能源集团/信息中心">能源集团/信息中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">姓名</span>
|
||||
<input class="filter-input-sm" id="doneName" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">员工编号</span>
|
||||
<input class="filter-input-sm" id="doneEmpId" placeholder="请输入编号">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterDone()">查询</button>
|
||||
<button class="btn" onclick="resetDoneFilter()">重置</button>
|
||||
<span style="flex:1;"></span>
|
||||
<button class="btn" onclick="alert('导出已参加人员数据')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v8M4 6l3 3 3-3M2 11h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出
|
||||
</button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:14%;">单位</th>
|
||||
<th style="width:14%;">部门</th>
|
||||
<th style="width:8%;">姓名</th>
|
||||
<th style="width:8%;">员工编号</th>
|
||||
<th style="width:6%;">性别</th>
|
||||
<th style="width:6%;">年龄</th>
|
||||
<th style="width:18%;">问卷</th>
|
||||
<th style="width:12%;">填写问卷时间</th>
|
||||
<th style="width:14%;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="doneTbody"></tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span class="pagination__total" id="donePageTotal"></span>
|
||||
<div class="pagination__pages"><span class="page-item active">1</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未参加人员 Tab -->
|
||||
<div id="tabPending" style="display:none;">
|
||||
<!-- 筛选 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">单位/部门</span>
|
||||
<select class="filter-select-sm" id="pendingDept">
|
||||
<option value="">全部</option>
|
||||
<option value="能源集团/人力资源部">能源集团/人力资源部</option>
|
||||
<option value="能源集团/安全环保部">能源集团/安全环保部</option>
|
||||
<option value="能源集团/工会">能源集团/工会</option>
|
||||
<option value="能源集团/生产技术部">能源集团/生产技术部</option>
|
||||
<option value="能源集团/财务部">能源集团/财务部</option>
|
||||
<option value="能源集团/信息中心">能源集团/信息中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">姓名</span>
|
||||
<input class="filter-input-sm" id="pendingName" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">员工编号</span>
|
||||
<input class="filter-input-sm" id="pendingEmpId" placeholder="请输入编号">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterPending()">查询</button>
|
||||
<button class="btn" onclick="resetPendingFilter()">重置</button>
|
||||
<span style="flex:1;"></span>
|
||||
<button class="btn" onclick="alert('导出未参加人员数据')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v8M4 6l3 3 3-3M2 11h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出
|
||||
</button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:18%;">单位</th>
|
||||
<th style="width:18%;">部门</th>
|
||||
<th style="width:15%;">姓名</th>
|
||||
<th style="width:15%;">员工编号</th>
|
||||
<th style="width:15%;">性别</th>
|
||||
<th style="width:15%;">年龄</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pendingTbody"></tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span class="pagination__total" id="pendingPageTotal"></span>
|
||||
<div class="pagination__pages"><span class="page-item active">1</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 问卷详情弹窗 -->
|
||||
<div class="modal-mask" id="surveyModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3 id="surveyModalTitle">问卷填写详情</h3>
|
||||
<button class="modal__close" onclick="closeModal('surveyModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body" id="surveyModalBody"></div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('surveyModal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
/* 根据来源页面切换侧边栏选中和面包屑 */
|
||||
(function(){
|
||||
var ref = document.referrer || '';
|
||||
if(ref.indexOf('activity-stat.html') > -1){
|
||||
document.getElementById('sidebarActManage').classList.remove('active');
|
||||
document.getElementById('sidebarActStat').classList.add('active');
|
||||
document.getElementById('breadcrumb').innerHTML = '<a href="activity-stat.html">活动统计</a><span>/</span><span>活动详情</span>';
|
||||
}
|
||||
})();
|
||||
|
||||
/* ===== 数据 ===== */
|
||||
var statusMap = {'待开始':'tag-blue','进行中':'tag-orange','已完成':'tag-green'};
|
||||
|
||||
/* 问卷适用人群映射 */
|
||||
var surveyCrowdMap = {
|
||||
'健康记录问卷':['A类','B类','C类','D类','E类'],
|
||||
'职业健康排查问卷':['A类','B类'],
|
||||
'心理健康评估问卷':['C类','D类'],
|
||||
'慢病管理随访问卷':['E类'],
|
||||
'新员工健康基线问卷':['A类']
|
||||
};
|
||||
var surveyCrowdColors = {'A类':'tag-blue','B类':'tag-green','C类':'tag-orange','D类':'tag-purple','E类':'tag-cyan'};
|
||||
|
||||
var activities = [
|
||||
{id:1, name:'2026年上半年员工健康排查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-01-01', dateTo:'2026-03-31', personType:'全体人员', personCount:1280, status:'已完成', leader:'张明', phone:'13800001234', surveys:['健康记录问卷','职业健康排查问卷'], desc:'年度例行员工健康排查活动，覆盖全体员工。'},
|
||||
{id:2, name:'2026年Q2心理健康专项排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:356, status:'进行中', leader:'李华', phone:'13800005678', surveys:['心理健康评估问卷'], desc:'针对C类和D类人群的心理健康专项排查。'},
|
||||
{id:3, name:'2026年Q3职业健康排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-07-01', dateTo:'2026-09-30', personType:'指定人员', personCount:520, status:'待开始', leader:'王强', phone:'13800009012', surveys:['职业健康排查问卷','健康记录问卷'], desc:'第三季度职业健康专项排查，针对A类和B类人群。'},
|
||||
{id:4, name:'新员工入职健康基线调查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-06-01', dateTo:'2026-12-31', personType:'指定人员', personCount:85, status:'进行中', leader:'赵芳', phone:'13800003456', surveys:['新员工健康基线问卷'], desc:'2026年度新入职员工健康基线数据采集。'},
|
||||
{id:5, name:'慢病患者季度随访', org:'能源集团', dept:'工会', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:128, status:'进行中', leader:'孙丽', phone:'13800007890', surveys:['慢病管理随访问卷'], desc:'E类慢病患者第二季度定期随访。'}
|
||||
];
|
||||
|
||||
/* 参与人员模拟数据 */
|
||||
var allPersons = [
|
||||
{id:'001001', name:'张伟', org:'能源集团', dept:'人力资源部', gender:'男', age:32, done:true, fillTime:'2026-03-05 09:32'},
|
||||
{id:'001002', name:'李娜', org:'能源集团', dept:'人力资源部', gender:'女', age:28, done:true, fillTime:'2026-03-05 10:15'},
|
||||
{id:'001003', name:'王磊', org:'能源集团', dept:'人力资源部', gender:'男', age:35, done:false},
|
||||
{id:'002001', name:'赵敏', org:'能源集团', dept:'安全环保部', gender:'女', age:30, done:true, fillTime:'2026-03-06 14:20'},
|
||||
{id:'002002', name:'刘洋', org:'能源集团', dept:'安全环保部', gender:'男', age:27, done:true, fillTime:'2026-03-06 16:45'},
|
||||
{id:'002003', name:'陈晨', org:'能源集团', dept:'安全环保部', gender:'女', age:25, done:false},
|
||||
{id:'002004', name:'周杰', org:'能源集团', dept:'安全环保部', gender:'男', age:33, done:false},
|
||||
{id:'003001', name:'吴芳', org:'能源集团', dept:'工会', gender:'女', age:29, done:true, fillTime:'2026-03-07 08:50'},
|
||||
{id:'003002', name:'孙丽', org:'能源集团', dept:'工会', gender:'女', age:31, done:true, fillTime:'2026-03-07 11:30'},
|
||||
{id:'003003', name:'郑浩', org:'能源集团', dept:'工会', gender:'男', age:26, done:false},
|
||||
{id:'004001', name:'黄磊', org:'能源集团', dept:'生产技术部', gender:'男', age:38, done:true, fillTime:'2026-03-08 09:10'},
|
||||
{id:'004002', name:'林燕', org:'能源集团', dept:'生产技术部', gender:'女', age:24, done:true, fillTime:'2026-03-08 15:22'},
|
||||
{id:'004003', name:'何强', org:'能源集团', dept:'生产技术部', gender:'男', age:34, done:false},
|
||||
{id:'004004', name:'马超', org:'能源集团', dept:'生产技术部', gender:'男', age:30, done:true, fillTime:'2026-03-09 10:05'},
|
||||
{id:'005001', name:'杨丽', org:'能源集团', dept:'财务部', gender:'女', age:27, done:true, fillTime:'2026-03-09 14:18'},
|
||||
{id:'005002', name:'朱峰', org:'能源集团', dept:'财务部', gender:'男', age:36, done:false},
|
||||
{id:'006001', name:'徐明', org:'能源集团', dept:'信息中心', gender:'男', age:29, done:true, fillTime:'2026-03-10 09:45'},
|
||||
{id:'006002', name:'韩雪', org:'能源集团', dept:'信息中心', gender:'女', age:26, done:true, fillTime:'2026-03-10 16:30'},
|
||||
{id:'006003', name:'曹杰', org:'能源集团', dept:'信息中心', gender:'男', age:31, done:false},
|
||||
{id:'006004', name:'邓辉', org:'能源集团', dept:'信息中心', gender:'男', age:28, done:false}
|
||||
];
|
||||
|
||||
/* 问卷填写模拟数据 */
|
||||
var surveyAnswers = {
|
||||
'001001': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], answer:'每天早上跑步30分钟，每周游泳一次'}
|
||||
]},
|
||||
{surveyName:'职业健康排查问卷', questions:[
|
||||
{q:'今天工作中是否接触有害物质？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'今天是否佩戴了防护用品？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'本周是否参加了安全培训？', type:'radio', opts:['是','否'], answer:'是'}
|
||||
]}
|
||||
],
|
||||
'001002': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], answer:'周末瑜伽课'}
|
||||
]},
|
||||
{surveyName:'职业健康排查问卷', questions:[
|
||||
{q:'今天工作中是否接触有害物质？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'今天是否佩戴了防护用品？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'本周是否参加了安全培训？', type:'radio', opts:['是','否'], answer:'否'}
|
||||
]}
|
||||
],
|
||||
'002001': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], answer:'每天散步'}
|
||||
]},
|
||||
{surveyName:'职业健康排查问卷', questions:[
|
||||
{q:'今天工作中是否接触有害物质？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否佩戴了防护用品？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'本周是否参加了安全培训？', type:'radio', opts:['是','否'], answer:'是'}
|
||||
]}
|
||||
],
|
||||
'002002': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], answer:'篮球、跑步'}
|
||||
]},
|
||||
{surveyName:'职业健康排查问卷', questions:[
|
||||
{q:'今天工作中是否接触有害物质？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'今天是否佩戴了防护用品？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'本周是否参加了安全培训？', type:'radio', opts:['是','否'], answer:'是'}
|
||||
]}
|
||||
],
|
||||
'003001': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], answer:'偶尔散步'}
|
||||
]}
|
||||
],
|
||||
'003002': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], answer:'每天跑步'}
|
||||
]}
|
||||
],
|
||||
'004001': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], answer:'举重训练'}
|
||||
]}
|
||||
],
|
||||
'004002': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], answer:'否'},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], answer:'瑜伽'}
|
||||
]}
|
||||
],
|
||||
'004004': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', answer:'是'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', answer:'否'},
|
||||
{q:'请描述您的运动习惯', answer:'游泳、骑行'}
|
||||
]}
|
||||
],
|
||||
'005001': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', answer:'是'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', answer:'否'},
|
||||
{q:'请描述您的运动习惯', answer:'羽毛球'}
|
||||
]}
|
||||
],
|
||||
'006001': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', answer:'否'},
|
||||
{q:'今天是否进行了30分钟以上运动？', answer:'是'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', answer:'否'},
|
||||
{q:'请描述您的运动习惯', answer:'每天跑步'}
|
||||
]}
|
||||
],
|
||||
'006002': [
|
||||
{surveyName:'健康记录问卷', questions:[
|
||||
{q:'今天是否按时吃早餐？', answer:'是'},
|
||||
{q:'今天饮水量是否达到1500ml？', answer:'是'},
|
||||
{q:'今天是否进行了30分钟以上运动？', answer:'否'},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', answer:'是'},
|
||||
{q:'今天是否感到焦虑或压力过大？', answer:'是'},
|
||||
{q:'请描述您的运动习惯', answer:'健身'}
|
||||
]}
|
||||
]
|
||||
};
|
||||
|
||||
/* 当前活动ID */
|
||||
var currentActId = null;
|
||||
var currentAct = null;
|
||||
var donePersons = [];
|
||||
var pendingPersons = [];
|
||||
var currentTab = 'done';
|
||||
|
||||
/* ===== 初始化 ===== */
|
||||
(function(){
|
||||
var params = window.location.search.substring(1).split('&');
|
||||
var id = null;
|
||||
params.forEach(function(p){var kv=p.split('=');if(kv[0]==='id') id=parseInt(kv[1]);});
|
||||
if(!id) return;
|
||||
currentActId = id;
|
||||
currentAct = activities.find(function(a){return a.id === id;});
|
||||
if(!currentAct) return;
|
||||
|
||||
/* 渲染基本信息 */
|
||||
var surveyNames = currentAct.surveys.map(function(s){
|
||||
var crowds = (surveyCrowdMap[s]||[]).join(', ');
|
||||
return '<span class="tag tag-blue">'+esc(s)+'</span>'+(crowds?' （'+crowds+'）':'');
|
||||
}).join('<br>');
|
||||
var html = '';
|
||||
html += '<div class="info-item"><span class="info-item__label">活动名称</span><span class="info-item__value">'+esc(currentAct.name)+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">组织单位</span><span class="info-item__value">'+esc(currentAct.org)+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">组织部门</span><span class="info-item__value">'+esc(currentAct.dept)+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">起止日期</span><span class="info-item__value">'+currentAct.dateFrom+' ~ '+currentAct.dateTo+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">人员筛选</span><span class="info-item__value">'+currentAct.personType+'（'+currentAct.personCount+'人）</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">活动状态</span><span class="info-item__value"><span class="tag '+statusMap[currentAct.status]+'">'+currentAct.status+'</span></span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">负责人</span><span class="info-item__value">'+esc(currentAct.leader)+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">负责人电话</span><span class="info-item__value">'+currentAct.phone+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">活动说明</span><span class="info-item__value">'+esc(currentAct.desc||'—')+'</span></div>';
|
||||
html += '<div class="info-item"><span class="info-item__label">选择问卷</span><span class="info-item__value">'+surveyNames+'</span></div>';
|
||||
document.getElementById('infoGrid').innerHTML = html;
|
||||
|
||||
/* 计算已参加/未参加 */
|
||||
donePersons = allPersons.filter(function(p){return p.done;});
|
||||
pendingPersons = allPersons.filter(function(p){return !p.done;});
|
||||
document.getElementById('doneCount').textContent = donePersons.length;
|
||||
document.getElementById('pendingCount').textContent = pendingPersons.length;
|
||||
|
||||
renderDoneTable(donePersons);
|
||||
renderPendingTable(pendingPersons);
|
||||
})();
|
||||
|
||||
/* ===== Tab 切换 ===== */
|
||||
function switchTab(tab){
|
||||
currentTab = tab;
|
||||
document.querySelectorAll('.tab-item').forEach(function(t){
|
||||
t.classList.toggle('active', t.getAttribute('data-tab')===tab);
|
||||
});
|
||||
document.getElementById('tabDone').style.display = tab==='done' ? '' : 'none';
|
||||
document.getElementById('tabPending').style.display = tab==='pending' ? '' : 'none';
|
||||
}
|
||||
|
||||
/* ===== 已参加人员渲染 ===== */
|
||||
function renderDoneTable(data){
|
||||
var html = '';
|
||||
if(data.length === 0){
|
||||
html = '<tr><td colspan="9"><div class="empty-state"><svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="26" stroke="currentColor" stroke-width="2" stroke-dasharray="4 3"/><path d="M24 28h16M24 34h10M24 40h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><div class="empty-state__title">暂无已参加人员</div></div></td></tr>';
|
||||
} else {
|
||||
data.forEach(function(p){
|
||||
var surveys = surveyAnswers[p.id] || [];
|
||||
var surveyText = surveys.map(function(sv){return '<span class="tag tag-blue">'+esc(sv.surveyName)+'</span>';}).join(' ');
|
||||
html += '<tr>';
|
||||
html += '<td>'+esc(p.org)+'</td>';
|
||||
html += '<td>'+esc(p.dept)+'</td>';
|
||||
html += '<td>'+esc(p.name)+'</td>';
|
||||
html += '<td>'+p.id+'</td>';
|
||||
html += '<td>'+p.gender+'</td>';
|
||||
html += '<td>'+p.age+'</td>';
|
||||
html += '<td>'+surveyText+'</td>';
|
||||
html += '<td>'+p.fillTime+'</td>';
|
||||
html += '<td><button class="link" onclick="openSurveyDetail(\''+p.id+'\')">问卷详情</button></td>';
|
||||
html += '</tr>';
|
||||
});
|
||||
}
|
||||
document.getElementById('doneTbody').innerHTML = html;
|
||||
document.getElementById('donePageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
}
|
||||
|
||||
/* ===== 未参加人员渲染 ===== */
|
||||
function renderPendingTable(data){
|
||||
var html = '';
|
||||
if(data.length === 0){
|
||||
html = '<tr><td colspan="6"><div class="empty-state"><svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="26" stroke="currentColor" stroke-width="2" stroke-dasharray="4 3"/><path d="M24 28h16M24 34h10M24 40h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><div class="empty-state__title">暂无未参加人员</div></div></td></tr>';
|
||||
} else {
|
||||
data.forEach(function(p){
|
||||
html += '<tr>';
|
||||
html += '<td>'+esc(p.org)+'</td>';
|
||||
html += '<td>'+esc(p.dept)+'</td>';
|
||||
html += '<td>'+esc(p.name)+'</td>';
|
||||
html += '<td>'+p.id+'</td>';
|
||||
html += '<td>'+p.gender+'</td>';
|
||||
html += '<td>'+p.age+'</td>';
|
||||
html += '</tr>';
|
||||
});
|
||||
}
|
||||
document.getElementById('pendingTbody').innerHTML = html;
|
||||
document.getElementById('pendingPageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
}
|
||||
|
||||
/* ===== 已参加人员筛选 ===== */
|
||||
function filterDone(){
|
||||
var name = document.getElementById('doneName').value.trim().toLowerCase();
|
||||
var empId = document.getElementById('doneEmpId').value.trim().toLowerCase();
|
||||
var deptVal = document.getElementById('doneDept').value;
|
||||
var filtered = donePersons.filter(function(p){
|
||||
if(name && p.name.toLowerCase().indexOf(name) === -1) return false;
|
||||
if(empId && p.id.toLowerCase().indexOf(empId) === -1) return false;
|
||||
if(deptVal && (p.org+'/'+p.dept) !== deptVal) return false;
|
||||
return true;
|
||||
});
|
||||
renderDoneTable(filtered);
|
||||
}
|
||||
|
||||
function resetDoneFilter(){
|
||||
document.getElementById('doneName').value = '';
|
||||
document.getElementById('doneEmpId').value = '';
|
||||
document.getElementById('doneDept').value = '';
|
||||
renderDoneTable(donePersons);
|
||||
}
|
||||
|
||||
/* ===== 未参加人员筛选 ===== */
|
||||
function filterPending(){
|
||||
var name = document.getElementById('pendingName').value.trim().toLowerCase();
|
||||
var empId = document.getElementById('pendingEmpId').value.trim().toLowerCase();
|
||||
var deptVal = document.getElementById('pendingDept').value;
|
||||
var filtered = pendingPersons.filter(function(p){
|
||||
if(name && p.name.toLowerCase().indexOf(name) === -1) return false;
|
||||
if(empId && p.id.toLowerCase().indexOf(empId) === -1) return false;
|
||||
if(deptVal && (p.org+'/'+p.dept) !== deptVal) return false;
|
||||
return true;
|
||||
});
|
||||
renderPendingTable(filtered);
|
||||
}
|
||||
|
||||
function resetPendingFilter(){
|
||||
document.getElementById('pendingName').value = '';
|
||||
document.getElementById('pendingEmpId').value = '';
|
||||
document.getElementById('pendingDept').value = '';
|
||||
renderPendingTable(pendingPersons);
|
||||
}
|
||||
|
||||
/* ===== 问卷详情弹窗 ===== */
|
||||
function openSurveyDetail(empId){
|
||||
var person = allPersons.find(function(p){return p.id === empId;});
|
||||
if(!person) return;
|
||||
document.getElementById('surveyModalTitle').textContent = person.name+'（'+empId+'）— 问卷填写详情';
|
||||
var answers = surveyAnswers[empId];
|
||||
var html = '';
|
||||
if(!answers || answers.length === 0){
|
||||
html = '<div class="empty-state"><svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="26" stroke="currentColor" stroke-width="2" stroke-dasharray="4 3"/><path d="M24 28h16M24 34h10M24 40h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><div class="empty-state__title">暂无问卷填写记录</div></div>';
|
||||
} else {
|
||||
answers.forEach(function(sv){
|
||||
html += '<div class="preview-survey">';
|
||||
html += '<div class="preview-survey__name"><svg viewBox="0 0 16 16" fill="none"><path d="M3 1h7l4 4v10H3V1z" stroke="currentColor" stroke-width="1.3"/><path d="M10 1v4h4" stroke="currentColor" stroke-width="1.3"/></svg>'+esc(sv.surveyName)+'</div>';
|
||||
sv.questions.forEach(function(q,i){
|
||||
html += '<div class="preview-q">';
|
||||
html += '<div class="preview-q__title">'+(i+1)+'. '+esc(q.q)+'</div>';
|
||||
if(q.type==='text'){
|
||||
html += '<div class="preview-q__answer">'+esc(q.answer)+'</div>';
|
||||
} else if(q.type==='checkbox'){
|
||||
// 多选题：显示所有选项，已选的高亮
|
||||
html += '<div class="preview-q__opts">';
|
||||
q.opts.forEach(function(opt){
|
||||
var isSel = q.answer && q.answer.indexOf(opt) > -1;
|
||||
html += '<div class="preview-q__opt'+(isSel?' selected':'')+'"><span class="q-check'+(isSel?' checked':'')+'"></span>'+esc(opt)+'</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
} else {
|
||||
// 单选题：显示所有选项，已选的高亮
|
||||
html += '<div class="preview-q__opts">';
|
||||
q.opts.forEach(function(opt){
|
||||
var isSel = (q.answer === opt);
|
||||
html += '<div class="preview-q__opt'+(isSel?' selected':'')+'"><span class="q-radio'+(isSel?' filled':'')+'"></span>'+esc(opt)+'</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
});
|
||||
}
|
||||
document.getElementById('surveyModalBody').innerHTML = html;
|
||||
document.getElementById('surveyModal').classList.add('show');
|
||||
}
|
||||
|
||||
function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
|
||||
function esc(s){return (s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
/* 点击遮罩关闭弹窗 */
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){
|
||||
m.addEventListener('click',function(e){if(e.target === m) closeModal(m.id);});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,927 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 新增活动 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
--shadow-md:0 4px 12px rgba(0,0,0,0.10);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);padding-bottom:80px;}
|
||||
|
||||
/* ===== 表单卡片 ===== */
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:32px;max-width:800px;}
|
||||
.form-card__title{font-size:var(--font-lg);font-weight:600;margin-bottom:24px;display:flex;align-items:center;gap:8px;}
|
||||
.form-card__title svg{width:22px;height:22px;color:var(--primary);}
|
||||
.form-group{margin-bottom:20px;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;margin-bottom:8px;}
|
||||
.form-group label .req{color:var(--danger);margin-left:2px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;transition:border-color .2s;box-sizing:border-box;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-group select.form-input{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:32px;cursor:pointer;}
|
||||
.form-textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;min-height:100px;transition:border-color .2s;font-family:inherit;box-sizing:border-box;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-row{display:flex;gap:16px;}
|
||||
.form-row .form-group{flex:1;}
|
||||
.form-date{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;transition:border-color .2s;box-sizing:border-box;}
|
||||
.form-date:focus{border-color:var(--primary);}
|
||||
.date-range{display:flex;align-items:center;gap:8px;}
|
||||
.date-range span{color:var(--text-secondary);font-size:var(--font-sm);white-space:nowrap;}
|
||||
|
||||
/* 单选组 */
|
||||
.radio-group{display:flex;gap:20px;padding-top:4px;}
|
||||
.radio-item{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.radio-item input[type="radio"]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
|
||||
|
||||
/* 人员筛选条件面板 */
|
||||
.person-panel{margin-top:12px;padding:16px;background:#FAFAFA;border-radius:var(--radius-md);border:1px solid var(--border);display:none;}
|
||||
.person-panel.show{display:block;}
|
||||
.person-panel__row{margin-bottom:12px;}
|
||||
.person-panel__row:last-child{margin-bottom:0;}
|
||||
.person-panel__label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;}
|
||||
.person-panel__selects{display:flex;gap:12px;}
|
||||
.person-panel__select{flex:1;min-width:200px;}
|
||||
|
||||
/* 多选下拉 */
|
||||
.multi-select{position:relative;width:100%;}
|
||||
.multi-select__trigger{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 32px 4px 8px;font-size:var(--font-sm);background:#fff;cursor:pointer;display:flex;align-items:center;gap:4px;flex-wrap:wrap;user-select:none;position:relative;transition:border-color .2s;}
|
||||
.multi-select__trigger:hover{border-color:var(--primary);}
|
||||
.multi-select__trigger.disabled{cursor:not-allowed;opacity:0.5;background:#FAFAFA;}
|
||||
.multi-select__trigger.disabled:hover{border-color:var(--border);}
|
||||
.multi-select__trigger::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top:5px solid #999;pointer-events:none;}
|
||||
.multi-select__trigger.disabled::after{border-top-color:#ccc;}
|
||||
.multi-select__trigger.placeholder{padding:0 32px 0 12px;color:var(--text-placeholder);align-items:center;}
|
||||
.multi-select__trigger .sel-tag{display:inline-flex;align-items:center;gap:2px;background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:var(--radius-sm);font-size:var(--font-xs);line-height:1.6;}
|
||||
.multi-select__trigger .sel-tag .tag-x{cursor:pointer;font-size:12px;line-height:1;margin-left:2px;}
|
||||
.multi-select__trigger .sel-tag .tag-x:hover{color:var(--danger);}
|
||||
.multi-select__panel{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:500;display:none;padding:8px 0;max-height:240px;overflow-y:auto;}
|
||||
.multi-select__panel.show{display:block;}
|
||||
.multi-select__opt{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;}
|
||||
.multi-select__opt:hover{background:#F5F7FA;}
|
||||
.multi-select__opt.checked{color:var(--primary);background:var(--primary-light);}
|
||||
.multi-select__cb{width:14px;height:14px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
|
||||
.multi-select__cb.checked{background:var(--primary);border-color:var(--primary);}
|
||||
.multi-select__cb.checked::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px;}
|
||||
|
||||
/* 问卷选项样式 */
|
||||
.survey-opt{display:flex;flex-direction:column;gap:2px;flex:1;}
|
||||
.survey-opt__name{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.survey-opt__crowd{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.multi-select__opt.checked .survey-opt__name{color:var(--primary);}
|
||||
.multi-select__opt.checked .survey-opt__crowd{color:#69b1ff;}
|
||||
|
||||
/* 搜索下拉 */
|
||||
.search-select{position:relative;width:100%;}
|
||||
.search-select__input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);outline:none;transition:border-color .2s;box-sizing:border-box;}
|
||||
.search-select__input:focus{border-color:var(--primary);}
|
||||
.search-select__input::placeholder{color:var(--text-placeholder);}
|
||||
.search-select__panel{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:500;display:none;max-height:200px;overflow-y:auto;}
|
||||
.search-select__panel.show{display:block;}
|
||||
.search-select__option{padding:8px 16px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;display:flex;align-items:center;gap:8px;}
|
||||
.search-select__option:hover{background:#F5F7FA;}
|
||||
.search-select__option.selected{color:var(--primary);background:var(--primary-light);}
|
||||
.search-select__avatar{width:28px;height:28px;border-radius:50%;background:#E6F7FF;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-xs);flex-shrink:0;}
|
||||
|
||||
/* 员工选择触发器 */
|
||||
.emp-trigger{display:flex;align-items:center;gap:8px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);background:#fff;cursor:pointer;transition:border-color .2s;user-select:none;}
|
||||
.emp-trigger:hover{border-color:var(--primary);}
|
||||
.emp-trigger.disabled{cursor:not-allowed;opacity:0.5;background:#FAFAFA;}
|
||||
.emp-trigger.disabled:hover{border-color:var(--border);}
|
||||
.emp-trigger__text{color:var(--text-placeholder);}
|
||||
.emp-trigger__count{color:var(--primary);font-weight:500;}
|
||||
.emp-trigger__icon{margin-left:auto;color:var(--text-placeholder);}
|
||||
|
||||
/* 员工弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1000;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:0 8px 40px rgba(0,0,0,0.15);width:900px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .15s;}
|
||||
.modal__close:hover{background:#F5F7FA;color:var(--text-primary);}
|
||||
.modal__body{padding:16px 24px;overflow-y:auto;flex:1;}
|
||||
.modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 24px;border-top:1px solid var(--border);background:#FAFAFA;}
|
||||
|
||||
/* 弹窗筛选区 */
|
||||
.emp-filter{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:flex-end;}
|
||||
.emp-filter__item{display:flex;flex-direction:column;gap:4px;}
|
||||
.emp-filter__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.emp-filter__input{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);outline:none;width:160px;transition:border-color .2s;}
|
||||
.emp-filter__input:focus{border-color:var(--primary);}
|
||||
.emp-filter__btn{height:32px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:1px solid var(--primary);background:var(--primary);color:#fff;transition:all .15s;}
|
||||
.emp-filter__btn:hover{background:#40a9ff;}
|
||||
.emp-filter__reset{height:32px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text-secondary);transition:all .15s;}
|
||||
.emp-filter__reset:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 员工表格 */
|
||||
.emp-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
.emp-table thead{position:sticky;top:0;z-index:1;}
|
||||
.emp-table th{background:#FAFAFA;border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;font-weight:500;color:var(--text-secondary);font-size:var(--font-xs);white-space:nowrap;}
|
||||
.emp-table td{padding:10px 12px;border-bottom:1px solid #F0F0F0;color:var(--text-primary);vertical-align:middle;}
|
||||
.emp-table tbody tr:hover{background:#F5F7FA;}
|
||||
.emp-table tbody tr.checked{background:var(--primary-light);}
|
||||
.emp-table__cb{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
|
||||
.emp-table__empty{text-align:center;padding:40px 0;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.emp-table__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--border);margin-top:8px;}
|
||||
.emp-table__info{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.emp-table__info strong{color:var(--primary);}
|
||||
|
||||
/* 文件上传 */
|
||||
.upload-area{border:2px dashed var(--border);border-radius:var(--radius-md);padding:32px;text-align:center;cursor:pointer;transition:all .2s;background:#FAFAFA;}
|
||||
.upload-area:hover{border-color:var(--primary);background:var(--primary-light);}
|
||||
.upload-area svg{width:40px;height:40px;color:var(--text-placeholder);margin-bottom:8px;}
|
||||
.upload-area__text{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.upload-area__hint{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:4px;}
|
||||
.file-list{margin-top:12px;}
|
||||
.file-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#F5F7FA;border-radius:var(--radius-sm);margin-bottom:6px;font-size:var(--font-sm);}
|
||||
.file-item__icon{width:28px;height:28px;border-radius:var(--radius-sm);background:#E6F7FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||||
.file-item__name{flex:1;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.file-item__size{color:var(--text-placeholder);font-size:var(--font-xs);flex-shrink:0;}
|
||||
.file-item__del{width:24px;height:24px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);transition:all .15s;flex-shrink:0;}
|
||||
.file-item__del:hover{background:#FFF1F0;color:var(--danger);}
|
||||
|
||||
/* 保存栏 */
|
||||
.save-bar{position:fixed;bottom:0;left:240px;right:0;background:#fff;border-top:1px solid var(--border);padding:12px 32px;display:flex;align-items:center;justify-content:flex-end;gap:12px;z-index:90;box-shadow:0 -2px 8px rgba(0,0,0,0.06);}
|
||||
.save-bar .btn{height:36px;padding:0 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* toast */
|
||||
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;}
|
||||
.toast.show{opacity:1;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="../archive-personal.html">档案</a>
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item active">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">
|
||||
<svg viewBox="0 0 22 22" fill="none"><path d="M11 2v18M2 11h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
新增活动
|
||||
</div>
|
||||
|
||||
<!-- 活动名称 -->
|
||||
<div class="form-group">
|
||||
<label>活动名称 <span class="req">*</span></label>
|
||||
<input class="form-input" id="actName" placeholder="请输入活动名称">
|
||||
</div>
|
||||
|
||||
<!-- 组织单位 & 组织部门 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>组织单位 <span class="req">*</span></label>
|
||||
<select class="form-input" id="actOrg">
|
||||
<option value="">请选择组织单位</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
<option>第四采油厂</option>
|
||||
<option>第五采油厂</option>
|
||||
<option>第六采油厂</option>
|
||||
<option>第七采油厂</option>
|
||||
<option>第八采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>组织部门 <span class="req">*</span></label>
|
||||
<select class="form-input" id="actDept">
|
||||
<option value="">请选择组织部门</option>
|
||||
<option>人力资源部</option>
|
||||
<option>安全环保部</option>
|
||||
<option>工会</option>
|
||||
<option>生产技术部</option>
|
||||
<option>财务部</option>
|
||||
<option>信息中心</option>
|
||||
<option>综合办公室</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择问卷 -->
|
||||
<div class="form-group">
|
||||
<label>选择问卷 <span class="req">*</span></label>
|
||||
<div class="multi-select" id="surveySelect">
|
||||
<div class="multi-select__trigger placeholder" onclick="toggleSurveyPanel()">请选择问卷（可多选）</div>
|
||||
<div class="multi-select__panel" id="surveyPanel">
|
||||
<div class="multi-select__opt" data-val="健康记录问卷" onclick="toggleSurveyOpt(this,'健康记录问卷')"><span class="multi-select__cb"></span><span class="survey-opt"><span class="survey-opt__name">健康记录问卷</span><span class="survey-opt__crowd">适用人群：A类/B类/C类/D类/E类</span></span></div>
|
||||
<div class="multi-select__opt" data-val="职业健康排查问卷" onclick="toggleSurveyOpt(this,'职业健康排查问卷')"><span class="multi-select__cb"></span><span class="survey-opt"><span class="survey-opt__name">职业健康排查问卷</span><span class="survey-opt__crowd">适用人群：A类/B类</span></span></div>
|
||||
<div class="multi-select__opt" data-val="心理健康评估问卷" onclick="toggleSurveyOpt(this,'心理健康评估问卷')"><span class="multi-select__cb"></span><span class="survey-opt"><span class="survey-opt__name">心理健康评估问卷</span><span class="survey-opt__crowd">适用人群：C类/D类</span></span></div>
|
||||
<div class="multi-select__opt" data-val="慢病管理随访问卷" onclick="toggleSurveyOpt(this,'慢病管理随访问卷')"><span class="multi-select__cb"></span><span class="survey-opt"><span class="survey-opt__name">慢病管理随访问卷</span><span class="survey-opt__crowd">适用人群：E类</span></span></div>
|
||||
<div class="multi-select__opt" data-val="新员工健康基线问卷" onclick="toggleSurveyOpt(this,'新员工健康基线问卷')"><span class="multi-select__cb"></span><span class="survey-opt"><span class="survey-opt__name">新员工健康基线问卷</span><span class="survey-opt__crowd">适用人群：A类</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人员筛选 -->
|
||||
<div class="form-group">
|
||||
<label>人员筛选 <span class="req">*</span></label>
|
||||
<div class="radio-group">
|
||||
<label class="radio-item">
|
||||
<input type="radio" name="personType" value="all" checked onchange="togglePersonPanel()">
|
||||
全体人员
|
||||
</label>
|
||||
<label class="radio-item">
|
||||
<input type="radio" name="personType" value="specific" onchange="togglePersonPanel()">
|
||||
指定人员
|
||||
</label>
|
||||
</div>
|
||||
<div class="person-panel" id="personPanel">
|
||||
<div class="person-panel__row">
|
||||
<div class="person-panel__label">指定部门</div>
|
||||
<div class="multi-select" id="deptSelect">
|
||||
<div class="multi-select__trigger placeholder disabled" onclick="toggleDeptPanel()" id="deptTrigger">请先选择组织单位</div>
|
||||
<div class="multi-select__panel" id="deptPanel">
|
||||
<div class="multi-select__opt" data-val="人力资源部" onclick="toggleDeptOpt(this,'人力资源部')"><span class="multi-select__cb"></span>人力资源部</div>
|
||||
<div class="multi-select__opt" data-val="安全环保部" onclick="toggleDeptOpt(this,'安全环保部')"><span class="multi-select__cb"></span>安全环保部</div>
|
||||
<div class="multi-select__opt" data-val="工会" onclick="toggleDeptOpt(this,'工会')"><span class="multi-select__cb"></span>工会</div>
|
||||
<div class="multi-select__opt" data-val="生产技术部" onclick="toggleDeptOpt(this,'生产技术部')"><span class="multi-select__cb"></span>生产技术部</div>
|
||||
<div class="multi-select__opt" data-val="财务部" onclick="toggleDeptOpt(this,'财务部')"><span class="multi-select__cb"></span>财务部</div>
|
||||
<div class="multi-select__opt" data-val="信息中心" onclick="toggleDeptOpt(this,'信息中心')"><span class="multi-select__cb"></span>信息中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person-panel__row">
|
||||
<div class="person-panel__label">指定员工</div>
|
||||
<div class="emp-trigger" id="empTrigger" onclick="openEmpModal()">
|
||||
<span class="emp-trigger__text" id="empTriggerText">请先选择组织单位</span>
|
||||
<svg class="emp-trigger__icon" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 5l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person-panel__row">
|
||||
<div class="person-panel__label">已选员工</div>
|
||||
<div id="selectedPersons" style="display:flex;flex-wrap:wrap;gap:6px;min-height:28px;"></div>
|
||||
<div id="selectedPersonsEmpty" style="font-size:var(--font-xs);color:var(--text-placeholder);">暂未选择具体员工</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 起止日期 -->
|
||||
<div class="form-group">
|
||||
<label>起止日期 <span class="req">*</span></label>
|
||||
<div class="date-range">
|
||||
<input class="form-date" type="date" id="dateFrom">
|
||||
<span>至</span>
|
||||
<input class="form-date" type="date" id="dateTo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 负责人 -->
|
||||
<div class="form-group">
|
||||
<label>负责人 <span class="req">*</span></label>
|
||||
<div class="search-select" id="leaderSelect">
|
||||
<input class="search-select__input" id="leaderInput" placeholder="搜索负责人姓名或工号" oninput="searchLeader()" onfocus="showLeaderPanel()">
|
||||
<div class="search-select__panel" id="leaderPanel">
|
||||
<div class="search-select__option" onclick="selectLeader(this,'张明','13800001234')"><span class="search-select__avatar">张</span>张明（13800001234）</div>
|
||||
<div class="search-select__option" onclick="selectLeader(this,'李华','13800005678')"><span class="search-select__avatar">李</span>李华（13800005678）</div>
|
||||
<div class="search-select__option" onclick="selectLeader(this,'王强','13800009012')"><span class="search-select__avatar">王</span>王强（13800009012）</div>
|
||||
<div class="search-select__option" onclick="selectLeader(this,'赵芳','13800003456')"><span class="search-select__avatar">赵</span>赵芳（13800003456）</div>
|
||||
<div class="search-select__option" onclick="selectLeader(this,'孙丽','13800007890')"><span class="search-select__avatar">孙</span>孙丽（13800007890）</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="leaderPhone">
|
||||
</div>
|
||||
|
||||
<!-- 活动说明 -->
|
||||
<div class="form-group">
|
||||
<label>活动说明</label>
|
||||
<textarea class="form-textarea" id="actDesc" placeholder="请输入活动说明（选填）"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 活动文件 -->
|
||||
<div class="form-group">
|
||||
<label>活动文件</label>
|
||||
<div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()">
|
||||
<svg viewBox="0 0 40 40" fill="none"><path d="M20 8v24M12 16l8-8 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 28v4a2 2 0 002 2h20a2 2 0 002-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<div class="upload-area__text">点击或拖拽文件到此区域上传</div>
|
||||
<div class="upload-area__hint">支持 PDF、Word、Excel、图片等格式，单个文件不超过 10MB</div>
|
||||
</div>
|
||||
<input type="file" id="fileInput" style="display:none" multiple onchange="handleFiles(this.files)">
|
||||
<div class="file-list" id="fileList"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 员工选择弹窗 -->
|
||||
<div class="modal-overlay" id="empModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__title">选择员工</span>
|
||||
<button class="modal__close" onclick="closeEmpModal()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<!-- 筛选区 -->
|
||||
<div class="emp-filter">
|
||||
<div class="emp-filter__item">
|
||||
<label class="emp-filter__label">部门</label>
|
||||
<select class="emp-filter__input" id="empFilterDept">
|
||||
<option value="">全部部门</option>
|
||||
<option>人力资源部</option>
|
||||
<option>安全环保部</option>
|
||||
<option>工会</option>
|
||||
<option>生产技术部</option>
|
||||
<option>财务部</option>
|
||||
<option>信息中心</option>
|
||||
<option>综合办公室</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="emp-filter__item">
|
||||
<label class="emp-filter__label">姓名</label>
|
||||
<input class="emp-filter__input" id="empFilterName" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="emp-filter__item">
|
||||
<label class="emp-filter__label">员工编号</label>
|
||||
<input class="emp-filter__input" id="empFilterId" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="emp-filter__item">
|
||||
<label class="emp-filter__label">所属人群</label>
|
||||
<select class="emp-filter__input" id="empFilterCrowd">
|
||||
<option value="">全部人群</option>
|
||||
<option>A类</option>
|
||||
<option>B类</option>
|
||||
<option>C类</option>
|
||||
<option>D类</option>
|
||||
<option>E类</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="emp-filter__item" style="align-self:flex-end;">
|
||||
<button class="emp-filter__btn" onclick="filterEmpTable()">查询</button>
|
||||
</div>
|
||||
<div class="emp-filter__item" style="align-self:flex-end;">
|
||||
<button class="emp-filter__reset" onclick="resetEmpFilter()">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工列表 -->
|
||||
<table class="emp-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:40px;"><input type="checkbox" class="emp-table__cb" id="empCheckAll" onclick="toggleEmpAll(this)"></th>
|
||||
<th>单位</th>
|
||||
<th>部门</th>
|
||||
<th>姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>性别</th>
|
||||
<th>年龄</th>
|
||||
<th>所属人群</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="empTableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="emp-table__footer">
|
||||
<span class="emp-table__info">共 <strong id="empTotalCount">0</strong> 条，已选 <strong id="empCheckedCount">0</strong> 条</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEmpModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmEmpSelect()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部保存栏 -->
|
||||
<div class="save-bar">
|
||||
<button class="btn btn-default" onclick="backToList()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveActivity()">保存活动</button>
|
||||
</div>
|
||||
|
||||
<!-- toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
/* ===== 问卷多选 ===== */
|
||||
var selectedSurveys = [];
|
||||
|
||||
function toggleSurveyPanel(){
|
||||
var panel = document.getElementById('surveyPanel');
|
||||
var isShow = panel.classList.contains('show');
|
||||
closeAllPanels();
|
||||
if(!isShow) panel.classList.add('show');
|
||||
}
|
||||
|
||||
function toggleSurveyOpt(el, val){
|
||||
var cb = el.querySelector('.multi-select__cb');
|
||||
if(cb.classList.contains('checked')){
|
||||
el.classList.remove('checked');cb.classList.remove('checked');
|
||||
selectedSurveys = selectedSurveys.filter(function(c){return c!==val;});
|
||||
} else {
|
||||
el.classList.add('checked');cb.classList.add('checked');
|
||||
selectedSurveys.push(val);
|
||||
}
|
||||
updateSurveyTrigger();
|
||||
}
|
||||
|
||||
function updateSurveyTrigger(){
|
||||
var trigger = document.querySelector('#surveySelect .multi-select__trigger');
|
||||
if(selectedSurveys.length===0){
|
||||
trigger.textContent = '请选择问卷（可多选）';
|
||||
trigger.className = 'multi-select__trigger placeholder';
|
||||
} else {
|
||||
trigger.className = 'multi-select__trigger';
|
||||
var html = '';
|
||||
selectedSurveys.forEach(function(c){
|
||||
html += '<span class="sel-tag">'+esc(c)+'<span class="tag-x" onclick="removeSurveyTag(\''+c+'\')">×</span></span>';
|
||||
});
|
||||
trigger.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
function removeSurveyTag(val){
|
||||
selectedSurveys = selectedSurveys.filter(function(c){return c!==val;});
|
||||
var opt = document.querySelector('#surveyPanel .multi-select__opt[data-val="'+val+'"]');
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
updateSurveyTrigger();
|
||||
}
|
||||
|
||||
/* ===== 部门多选 ===== */
|
||||
var selectedDepts = [];
|
||||
|
||||
function toggleDeptPanel(){
|
||||
var org = document.getElementById('actOrg').value;
|
||||
if(!org){
|
||||
showToast('请先选择组织单位');
|
||||
return;
|
||||
}
|
||||
var panel = document.getElementById('deptPanel');
|
||||
var isShow = panel.classList.contains('show');
|
||||
closeAllPanels();
|
||||
if(!isShow) panel.classList.add('show');
|
||||
}
|
||||
|
||||
function toggleDeptOpt(el, val){
|
||||
var cb = el.querySelector('.multi-select__cb');
|
||||
if(cb.classList.contains('checked')){
|
||||
el.classList.remove('checked');cb.classList.remove('checked');
|
||||
selectedDepts = selectedDepts.filter(function(c){return c!==val;});
|
||||
} else {
|
||||
el.classList.add('checked');cb.classList.add('checked');
|
||||
selectedDepts.push(val);
|
||||
}
|
||||
updateDeptTrigger();
|
||||
}
|
||||
|
||||
function updateDeptTrigger(){
|
||||
var trigger = document.querySelector('#deptSelect .multi-select__trigger');
|
||||
if(selectedDepts.length===0){
|
||||
trigger.textContent = '请选择部门（可多选）';
|
||||
trigger.className = 'multi-select__trigger placeholder';
|
||||
} else {
|
||||
trigger.className = 'multi-select__trigger';
|
||||
var html = '';
|
||||
selectedDepts.forEach(function(c){
|
||||
html += '<span class="sel-tag">'+esc(c)+'<span class="tag-x" onclick="removeDeptTag(\''+c+'\')">×</span></span>';
|
||||
});
|
||||
trigger.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
function removeDeptTag(val){
|
||||
selectedDepts = selectedDepts.filter(function(c){return c!==val;});
|
||||
var opt = document.querySelector('#deptPanel .multi-select__opt[data-val="'+val+'"]');
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
updateDeptTrigger();
|
||||
}
|
||||
|
||||
/* ===== 人员筛选切换 ===== */
|
||||
function togglePersonPanel(){
|
||||
var val = document.querySelector('input[name="personType"]:checked').value;
|
||||
var panel = document.getElementById('personPanel');
|
||||
if(val === 'specific'){panel.classList.add('show');}
|
||||
else{panel.classList.remove('show');}
|
||||
}
|
||||
|
||||
/* ===== 员工弹窗选择 ===== */
|
||||
var selectedEmployees = [];
|
||||
var tempSelectedEmps = [];
|
||||
|
||||
// 模拟员工数据
|
||||
var mockEmployees = [
|
||||
{org:'第一采油厂',dept:'人力资源部',name:'张伟',id:'001280',gender:'男',age:32,crowd:'A类'},
|
||||
{org:'第一采油厂',dept:'人力资源部',name:'李娜',id:'001356',gender:'女',age:28,crowd:'B类'},
|
||||
{org:'第一采油厂',dept:'安全环保部',name:'王磊',id:'002100',gender:'男',age:35,crowd:'A类'},
|
||||
{org:'第一采油厂',dept:'安全环保部',name:'赵敏',id:'003045',gender:'女',age:30,crowd:'C类'},
|
||||
{org:'第二采油厂',dept:'工会',name:'刘洋',id:'004521',gender:'男',age:42,crowd:'D类'},
|
||||
{org:'第二采油厂',dept:'生产技术部',name:'陈静',id:'005012',gender:'女',age:26,crowd:'A类'},
|
||||
{org:'第二采油厂',dept:'财务部',name:'杨帆',id:'005678',gender:'男',age:38,crowd:'B类'},
|
||||
{org:'第三采油厂',dept:'信息中心',name:'孙丽',id:'006234',gender:'女',age:31,crowd:'C类'},
|
||||
{org:'第三采油厂',dept:'综合办公室',name:'周强',id:'006890',gender:'男',age:45,crowd:'E类'},
|
||||
{org:'第三采油厂',dept:'人力资源部',name:'吴芳',id:'007123',gender:'女',age:29,crowd:'A类'},
|
||||
{org:'第四采油厂',dept:'安全环保部',name:'郑浩',id:'007456',gender:'男',age:33,crowd:'B类'},
|
||||
{org:'第四采油厂',dept:'生产技术部',name:'黄丽',id:'008789',gender:'女',age:27,crowd:'A类'},
|
||||
{org:'第五采油厂',dept:'工会',name:'林涛',id:'009012',gender:'男',age:40,crowd:'D类'},
|
||||
{org:'第五采油厂',dept:'财务部',name:'何婷',id:'009345',gender:'女',age:34,crowd:'C类'},
|
||||
{org:'第六采油厂',dept:'信息中心',name:'马超',id:'010678',gender:'男',age:36,crowd:'B类'},
|
||||
{org:'第六采油厂',dept:'综合办公室',name:'徐莹',id:'011901',gender:'女',age:25,crowd:'A类'},
|
||||
{org:'第七采油厂',dept:'人力资源部',name:'胡军',id:'012234',gender:'男',age:41,crowd:'E类'},
|
||||
{org:'第七采油厂',dept:'安全环保部',name:'郭敏',id:'013567',gender:'女',age:30,crowd:'C类'},
|
||||
{org:'第八采油厂',dept:'生产技术部',name:'高远',id:'014890',gender:'男',age:37,crowd:'A类'},
|
||||
{org:'第八采油厂',dept:'工会',name:'罗琳',id:'015123',gender:'女',age:32,crowd:'B类'},
|
||||
];
|
||||
|
||||
// 监听组织单位变化，同步更新部门和员工选择器状态
|
||||
document.getElementById('actOrg').addEventListener('change', updateOrgDependent);
|
||||
|
||||
function updateOrgDependent(){
|
||||
var org = document.getElementById('actOrg').value;
|
||||
// 更新部门选择器状态
|
||||
var deptTrigger = document.getElementById('deptTrigger');
|
||||
if(org){
|
||||
deptTrigger.classList.remove('disabled');
|
||||
if(selectedDepts.length === 0){
|
||||
deptTrigger.textContent = '请选择部门（可多选）';
|
||||
}
|
||||
} else {
|
||||
deptTrigger.classList.add('disabled');
|
||||
deptTrigger.textContent = '请先选择组织单位';
|
||||
// 清空已选部门
|
||||
selectedDepts = [];
|
||||
updateDeptTrigger();
|
||||
}
|
||||
// 更新员工选择器状态
|
||||
var empTrigger = document.getElementById('empTrigger');
|
||||
var text = document.getElementById('empTriggerText');
|
||||
if(org){
|
||||
empTrigger.classList.remove('disabled');
|
||||
text.className = 'emp-trigger__text';
|
||||
text.textContent = '点击选择员工';
|
||||
} else {
|
||||
empTrigger.classList.add('disabled');
|
||||
text.className = 'emp-trigger__text';
|
||||
text.textContent = '请先选择组织单位';
|
||||
// 清空已选员工
|
||||
selectedEmployees = [];
|
||||
renderSelectedPersons();
|
||||
}
|
||||
}
|
||||
|
||||
// 打开员工弹窗
|
||||
function openEmpModal(){
|
||||
var org = document.getElementById('actOrg').value;
|
||||
if(!org){
|
||||
showToast('请先选择组织单位');
|
||||
return;
|
||||
}
|
||||
// 初始化临时选中列表为当前已选
|
||||
tempSelectedEmps = selectedEmployees.slice();
|
||||
renderEmpTable();
|
||||
document.getElementById('empModal').classList.add('show');
|
||||
}
|
||||
|
||||
// 关闭员工弹窗
|
||||
function closeEmpModal(){
|
||||
document.getElementById('empModal').classList.remove('show');
|
||||
}
|
||||
|
||||
// 渲染员工表格
|
||||
function renderEmpTable(){
|
||||
var org = document.getElementById('actOrg').value;
|
||||
var filterDept = document.getElementById('empFilterDept').value;
|
||||
var filterName = document.getElementById('empFilterName').value.trim().toLowerCase();
|
||||
var filterId = document.getElementById('empFilterId').value.trim().toLowerCase();
|
||||
var filterCrowd = document.getElementById('empFilterCrowd').value;
|
||||
|
||||
// 根据组织单位筛选
|
||||
var filtered = mockEmployees.filter(function(e){
|
||||
if(e.org !== org) return false;
|
||||
if(filterDept && e.dept !== filterDept) return false;
|
||||
if(filterName && e.name.indexOf(filterName) === -1) return false;
|
||||
if(filterId && e.id.toLowerCase().indexOf(filterId) === -1) return false;
|
||||
if(filterCrowd && e.crowd !== filterCrowd) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
var tbody = document.getElementById('empTableBody');
|
||||
if(filtered.length === 0){
|
||||
tbody.innerHTML = '<tr><td colspan="8" class="emp-table__empty">暂无匹配的员工数据</td></tr>';
|
||||
} else {
|
||||
var html = '';
|
||||
filtered.forEach(function(e){
|
||||
var isChecked = tempSelectedEmps.some(function(s){return s.id===e.id;});
|
||||
html += '<tr class="'+(isChecked?'checked':'')+'">';
|
||||
html += '<td><input type="checkbox" class="emp-table__cb emp-row-cb" data-id="'+e.id+'" '+(isChecked?'checked':'')+' onclick="toggleEmpRow(this)"></td>';
|
||||
html += '<td>'+esc(e.org)+'</td>';
|
||||
html += '<td>'+esc(e.dept)+'</td>';
|
||||
html += '<td>'+esc(e.name)+'</td>';
|
||||
html += '<td>'+esc(e.id)+'</td>';
|
||||
html += '<td>'+esc(e.gender)+'</td>';
|
||||
html += '<td>'+e.age+'</td>';
|
||||
html += '<td>'+esc(e.crowd)+'</td>';
|
||||
html += '</tr>';
|
||||
});
|
||||
tbody.innerHTML = html;
|
||||
}
|
||||
|
||||
document.getElementById('empTotalCount').textContent = filtered.length;
|
||||
updateEmpCheckedCount();
|
||||
updateCheckAllState();
|
||||
}
|
||||
|
||||
// 查询筛选
|
||||
function filterEmpTable(){
|
||||
renderEmpTable();
|
||||
}
|
||||
|
||||
// 重置筛选
|
||||
function resetEmpFilter(){
|
||||
document.getElementById('empFilterDept').value = '';
|
||||
document.getElementById('empFilterName').value = '';
|
||||
document.getElementById('empFilterId').value = '';
|
||||
document.getElementById('empFilterCrowd').value = '';
|
||||
renderEmpTable();
|
||||
}
|
||||
|
||||
// 全选/取消全选
|
||||
function toggleEmpAll(el){
|
||||
var checkboxes = document.querySelectorAll('.emp-row-cb');
|
||||
var isChecked = el.checked;
|
||||
checkboxes.forEach(function(cb){
|
||||
cb.checked = isChecked;
|
||||
var empId = cb.getAttribute('data-id');
|
||||
var emp = mockEmployees.find(function(e){return e.id===empId;});
|
||||
if(isChecked){
|
||||
if(!tempSelectedEmps.some(function(s){return s.id===empId;})){
|
||||
tempSelectedEmps.push({name:emp.name,id:emp.id,org:emp.org,dept:emp.dept,crowd:emp.crowd});
|
||||
}
|
||||
} else {
|
||||
tempSelectedEmps = tempSelectedEmps.filter(function(s){return s.id!==empId;});
|
||||
}
|
||||
});
|
||||
renderEmpTable();
|
||||
}
|
||||
|
||||
// 更新全选框状态
|
||||
function updateCheckAllState(){
|
||||
var checkboxes = document.querySelectorAll('.emp-row-cb');
|
||||
var checkAll = document.getElementById('empCheckAll');
|
||||
if(checkboxes.length === 0){checkAll.checked = false;return;}
|
||||
checkAll.checked = Array.from(checkboxes).every(function(cb){return cb.checked;});
|
||||
}
|
||||
|
||||
// 单行选择
|
||||
function toggleEmpRow(el){
|
||||
var empId = el.getAttribute('data-id');
|
||||
var emp = mockEmployees.find(function(e){return e.id===empId;});
|
||||
if(el.checked){
|
||||
if(!tempSelectedEmps.some(function(s){return s.id===empId;})){
|
||||
tempSelectedEmps.push({name:emp.name,id:emp.id,org:emp.org,dept:emp.dept,crowd:emp.crowd});
|
||||
}
|
||||
} else {
|
||||
tempSelectedEmps = tempSelectedEmps.filter(function(s){return s.id!==empId;});
|
||||
}
|
||||
updateEmpCheckedCount();
|
||||
updateCheckAllState();
|
||||
// 更新行样式
|
||||
el.closest('tr').className = el.checked ? 'checked' : '';
|
||||
}
|
||||
|
||||
// 更新已选计数
|
||||
function updateEmpCheckedCount(){
|
||||
var count = tempSelectedEmps.length;
|
||||
document.getElementById('empCheckedCount').textContent = count;
|
||||
}
|
||||
|
||||
// 确定选择
|
||||
function confirmEmpSelect(){
|
||||
selectedEmployees = tempSelectedEmps.slice();
|
||||
renderSelectedPersons();
|
||||
updateEmpTriggerText();
|
||||
closeEmpModal();
|
||||
}
|
||||
|
||||
// 更新触发器显示文本
|
||||
function updateEmpTriggerText(){
|
||||
var text = document.getElementById('empTriggerText');
|
||||
if(selectedEmployees.length === 0){
|
||||
text.textContent = '点击选择员工';
|
||||
text.className = 'emp-trigger__text';
|
||||
} else {
|
||||
text.textContent = '已选 ' + selectedEmployees.length + ' 名员工';
|
||||
text.className = 'emp-trigger__count';
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 负责人搜索选择 ===== */
|
||||
var selectedLeader = null;
|
||||
|
||||
function searchLeader(){
|
||||
var keyword = document.getElementById('leaderInput').value.trim().toLowerCase();
|
||||
var options = document.querySelectorAll('#leaderPanel .search-select__option');
|
||||
options.forEach(function(opt){
|
||||
var text = opt.textContent.toLowerCase();
|
||||
opt.style.display = text.indexOf(keyword) > -1 ? '' : 'none';
|
||||
});
|
||||
showLeaderPanel();
|
||||
}
|
||||
|
||||
function showLeaderPanel(){
|
||||
var panel = document.getElementById('leaderPanel');
|
||||
closeAllPanels();
|
||||
panel.classList.add('show');
|
||||
}
|
||||
|
||||
function selectLeader(el, name, phone){
|
||||
selectedLeader = {name:name, phone:phone};
|
||||
document.getElementById('leaderInput').value = name;
|
||||
document.getElementById('leaderPhone').value = phone;
|
||||
document.getElementById('leaderPanel').classList.remove('show');
|
||||
// 标记已选
|
||||
document.querySelectorAll('#leaderPanel .search-select__option').forEach(function(o){o.classList.remove('selected');});
|
||||
el.classList.add('selected');
|
||||
}
|
||||
|
||||
/* ===== 已选人员渲染 ===== */
|
||||
function renderSelectedPersons(){
|
||||
var container = document.getElementById('selectedPersons');
|
||||
var empty = document.getElementById('selectedPersonsEmpty');
|
||||
if(selectedEmployees.length === 0){
|
||||
container.innerHTML = '';
|
||||
empty.style.display = '';
|
||||
} else {
|
||||
empty.style.display = 'none';
|
||||
var html = '';
|
||||
selectedEmployees.forEach(function(e){
|
||||
var info = esc(e.name)+'（'+esc(e.dept)+'）';
|
||||
html += '<span class="sel-tag" style="background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);display:inline-flex;align-items:center;gap:2px;line-height:1.6;">'+info+'<span style="cursor:pointer;font-size:12px;" onclick="removeEmp(\''+esc(e.id)+'\')">×</span></span>';
|
||||
});
|
||||
container.innerHTML = html;
|
||||
}
|
||||
updateEmpTriggerText();
|
||||
}
|
||||
|
||||
function removeEmp(empId){
|
||||
selectedEmployees = selectedEmployees.filter(function(e){return e.id!==empId;});
|
||||
renderSelectedPersons();
|
||||
}
|
||||
|
||||
/* ===== 文件上传 ===== */
|
||||
var uploadedFiles = [];
|
||||
|
||||
function handleFiles(files){
|
||||
for(var i=0;i<files.length;i++){
|
||||
var f = files[i];
|
||||
if(f.size > 10*1024*1024){alert('文件「'+f.name+'」超过10MB限制');continue;}
|
||||
uploadedFiles.push({name:f.name, size:f.size});
|
||||
}
|
||||
renderFileList();
|
||||
document.getElementById('fileInput').value = '';
|
||||
}
|
||||
|
||||
function renderFileList(){
|
||||
var container = document.getElementById('fileList');
|
||||
var html = '';
|
||||
uploadedFiles.forEach(function(f,i){
|
||||
var sizeStr = f.size > 1024*1024 ? (f.size/(1024*1024)).toFixed(1)+' MB' : (f.size/1024).toFixed(0)+' KB';
|
||||
html += '<div class="file-item">';
|
||||
html += '<div class="file-item__icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 1h6l4 4v10H3V1z" stroke="#1890FF" stroke-width="1.3"/><path d="M9 1v4h4" stroke="#1890FF" stroke-width="1.3"/></svg></div>';
|
||||
html += '<span class="file-item__name">'+esc(f.name)+'</span>';
|
||||
html += '<span class="file-item__size">'+sizeStr+'</span>';
|
||||
html += '<button class="file-item__del" onclick="removeFile('+i+')" title="删除"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>';
|
||||
html += '</div>';
|
||||
});
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function removeFile(idx){
|
||||
uploadedFiles.splice(idx, 1);
|
||||
renderFileList();
|
||||
}
|
||||
|
||||
/* ===== 拖拽上传 ===== */
|
||||
(function(){
|
||||
var area = document.getElementById('uploadArea');
|
||||
area.addEventListener('dragover', function(e){e.preventDefault();area.style.borderColor='var(--primary)';area.style.background='var(--primary-light)';});
|
||||
area.addEventListener('dragleave', function(){area.style.borderColor='';area.style.background='';});
|
||||
area.addEventListener('drop', function(e){
|
||||
e.preventDefault();area.style.borderColor='';area.style.background='';
|
||||
handleFiles(e.dataTransfer.files);
|
||||
});
|
||||
})();
|
||||
|
||||
/* ===== 关闭所有面板 ===== */
|
||||
function closeAllPanels(){
|
||||
document.getElementById('surveyPanel').classList.remove('show');
|
||||
document.getElementById('deptPanel').classList.remove('show');
|
||||
document.getElementById('leaderPanel').classList.remove('show');
|
||||
}
|
||||
|
||||
/* ===== 保存 ===== */
|
||||
function saveActivity(){
|
||||
var name = document.getElementById('actName').value.trim();
|
||||
if(!name){alert('请输入活动名称');return;}
|
||||
if(selectedSurveys.length===0){alert('请选择问卷');return;}
|
||||
var personType = document.querySelector('input[name="personType"]:checked').value;
|
||||
if(personType==='specific'){
|
||||
if(selectedDepts.length===0 && selectedEmployees.length===0){alert('请选择指定部门或指定员工');return;}
|
||||
}
|
||||
var dateFrom = document.getElementById('dateFrom').value;
|
||||
var dateTo = document.getElementById('dateTo').value;
|
||||
if(!dateFrom||!dateTo){alert('请选择起止日期');return;}
|
||||
var org = document.getElementById('actOrg').value.trim();
|
||||
var dept = document.getElementById('actDept').value.trim();
|
||||
if(!org||!dept){alert('请输入组织单位和组织部门');return;}
|
||||
if(!selectedLeader){alert('请选择负责人');return;}
|
||||
showToast('保存成功！');
|
||||
setTimeout(function(){window.location.href='activity-manage.html';},1000);
|
||||
}
|
||||
|
||||
function backToList(){window.location.href='activity-manage.html';}
|
||||
|
||||
function esc(s){return (s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
setTimeout(function(){t.classList.remove('show');},1500);
|
||||
}
|
||||
|
||||
/* ===== 点击外部关闭面板 ===== */
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('#surveySelect')) document.getElementById('surveyPanel').classList.remove('show');
|
||||
if(!e.target.closest('#deptSelect')) document.getElementById('deptPanel').classList.remove('show');
|
||||
if(!e.target.closest('#leaderSelect')) document.getElementById('leaderPanel').classList.remove('show');
|
||||
});
|
||||
|
||||
// 点击弹窗遮罩关闭
|
||||
document.getElementById('empModal').addEventListener('click',function(e){
|
||||
if(e.target === this) closeEmpModal();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,490 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 活动管理 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;background:#fff;padding:16px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:160px;background:#fff;cursor:pointer;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
.filter-date{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:140px;}
|
||||
.filter-date:focus{border-color:var(--primary);}
|
||||
/* 工具栏 */
|
||||
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
|
||||
.toolbar .spacer{flex:1;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text-primary);transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.btn-primary:hover{background:#40a9ff;border-color:#40a9ff;color:#fff;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;background:none;border:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.link-separator{color:var(--border);margin:0 6px;user-select:none;}
|
||||
.link-clickable{cursor:pointer;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 24px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.pagination__total{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.pagination__pages{display:flex;align-items:center;gap:4px;}
|
||||
.page-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;}
|
||||
.page-item:hover{color:var(--primary);}
|
||||
.page-item.active{background:var(--primary);color:#fff;}
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s;}
|
||||
.modal-mask.show{opacity:1;pointer-events:auto;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:720px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
.modal-xl{width:1000px;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.modal__header h3{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:20px;color:var(--text-secondary);border-radius:var(--radius-sm);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
/* 参与人员弹窗 */
|
||||
.participant-filter{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;padding:12px 16px;background:#FAFAFA;border-radius:var(--radius-md);}
|
||||
.participant-filter .filter-item{display:flex;align-items:center;gap:6px;}
|
||||
.participant-filter .filter-item__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.participant-filter .filter-input-sm{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-xs);outline:none;min-width:140px;}
|
||||
.participant-filter .filter-input-sm:focus{border-color:var(--primary);}
|
||||
.participant-filter .filter-select-sm{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-xs);outline:none;min-width:120px;background:#fff;cursor:pointer;}
|
||||
.participant-filter .filter-select-sm:focus{border-color:var(--primary);}
|
||||
.participant-table{width:100%;border-collapse:collapse;}
|
||||
.participant-table thead th{background:#FAFAFA;padding:10px 14px;text-align:left;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
.participant-table tbody td{padding:10px 14px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
.participant-table tbody tr:last-child td{border-bottom:none;}
|
||||
.participant-table tbody tr:hover{background:#F8FBFF;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="../archive-personal.html">档案</a>
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item active">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">活动名称</span>
|
||||
<input class="filter-input" id="filterName" placeholder="请输入活动名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">组织单位</span>
|
||||
<select class="filter-select" id="filterOrg">
|
||||
<option value="">全部</option>
|
||||
<option value="能源集团">能源集团</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">活动状态</span>
|
||||
<select class="filter-select" id="filterStatus">
|
||||
<option value="">全部</option>
|
||||
<option value="待开始">待开始</option>
|
||||
<option value="进行中">进行中</option>
|
||||
<option value="已完成">已完成</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">日期范围</span>
|
||||
<input class="filter-date" type="date" id="filterDateFrom">
|
||||
<span style="color:var(--text-secondary);">至</span>
|
||||
<input class="filter-date" type="date" id="filterDateTo">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterTable()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="M10.5 10.5l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
<!-- 操作栏 -->
|
||||
<div class="toolbar">
|
||||
<button class="btn btn-primary" onclick="window.location.href='activity-edit.html'">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
新增活动
|
||||
</button>
|
||||
<button class="btn" onclick="alert('导出列表数据')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v8M4 6l3 3 3-3M2 11h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn" onclick="alert('查看导出任务')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.3"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">活动列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);" id="totalCount">共 0 条数据</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:18%;">活动名称</th>
|
||||
<th style="width:10%;">组织单位</th>
|
||||
<th style="width:10%;">组织部门</th>
|
||||
<th style="width:12%;">起止日期</th>
|
||||
<th style="width:10%;">人员筛选</th>
|
||||
<th style="width:8%;">活动状态</th>
|
||||
<th style="width:8%;">负责人</th>
|
||||
<th style="width:10%;">负责人电话</th>
|
||||
<th style="width:14%;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span class="pagination__total" id="pageTotal"></span>
|
||||
<div class="pagination__pages">
|
||||
<span class="page-item active">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 参与人员弹窗 -->
|
||||
<div class="modal-mask" id="personModal">
|
||||
<div class="modal modal-xl">
|
||||
<div class="modal__header">
|
||||
<h3 id="personModalTitle">参与人员</h3>
|
||||
<button class="modal__close" onclick="closeModal('personModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="participant-filter">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">单位/部门</span>
|
||||
<select class="filter-select-sm" id="pfDept">
|
||||
<option value="">全部</option>
|
||||
<option value="能源集团/人力资源部">能源集团/人力资源部</option>
|
||||
<option value="能源集团/安全环保部">能源集团/安全环保部</option>
|
||||
<option value="能源集团/工会">能源集团/工会</option>
|
||||
<option value="能源集团/生产技术部">能源集团/生产技术部</option>
|
||||
<option value="能源集团/财务部">能源集团/财务部</option>
|
||||
<option value="能源集团/信息中心">能源集团/信息中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">员工姓名</span>
|
||||
<input class="filter-input-sm" id="pfName" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">员工编号</span>
|
||||
<input class="filter-input-sm" id="pfEmpId" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">是否参加</span>
|
||||
<select class="filter-select-sm" id="pfStatus">
|
||||
<option value="">全部</option>
|
||||
<option value="done">已参加</option>
|
||||
<option value="pending">未参加</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" style="height:32px;padding:0 12px;font-size:var(--font-xs);" onclick="filterPersons()">查询</button>
|
||||
<button class="btn" style="height:32px;padding:0 12px;font-size:var(--font-xs);" onclick="resetPersonFilter()">重置</button>
|
||||
</div>
|
||||
<!-- 统计信息 -->
|
||||
<div style="display:flex;gap:20px;margin-bottom:12px;padding:8px 16px;background:#F6FFED;border-radius:var(--radius-sm);font-size:var(--font-sm);">
|
||||
<span>应参加：<strong style="color:var(--primary);" id="pTotalCount">0</strong> 人</span>
|
||||
<span>已参加：<strong style="color:var(--success);" id="pDoneCount">0</strong> 人</span>
|
||||
<span>未参加：<strong style="color:var(--danger);" id="pPendingCount">0</strong> 人</span>
|
||||
</div>
|
||||
<!-- 人员表格 -->
|
||||
<table class="participant-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:20%;">单位</th>
|
||||
<th style="width:20%;">部门</th>
|
||||
<th style="width:15%;">姓名</th>
|
||||
<th style="width:15%;">员工编号</th>
|
||||
<th style="width:10%;">是否已参加</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="personTbody"></tbody>
|
||||
</table>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span class="pagination__total" id="personPageTotal"></span>
|
||||
<div class="pagination__pages">
|
||||
<span class="page-item active">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('personModal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
/* ===== 数据 ===== */
|
||||
var statusMap = {'待开始':'tag-blue','进行中':'tag-orange','已完成':'tag-green'};
|
||||
|
||||
var activities = [
|
||||
{id:1, name:'2026年上半年员工健康排查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-01-01', dateTo:'2026-03-31', personType:'全体人员', personCount:1280, status:'已完成', leader:'张明', phone:'13800001234', surveys:['健康记录问卷','职业健康排查问卷'], desc:'年度例行员工健康排查活动，覆盖全体员工。'},
|
||||
{id:2, name:'2026年Q2心理健康专项排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:356, status:'进行中', leader:'李华', phone:'13800005678', surveys:['心理健康评估问卷'], desc:'针对C类和D类人群的心理健康专项排查。'},
|
||||
{id:3, name:'2026年Q3职业健康排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-07-01', dateTo:'2026-09-30', personType:'指定人员', personCount:520, status:'待开始', leader:'王强', phone:'13800009012', surveys:['职业健康排查问卷','健康记录问卷'], desc:'第三季度职业健康专项排查，针对A类和B类人群。'},
|
||||
{id:4, name:'新员工入职健康基线调查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-06-01', dateTo:'2026-12-31', personType:'指定人员', personCount:85, status:'进行中', leader:'赵芳', phone:'13800003456', surveys:['新员工健康基线问卷'], desc:'2026年度新入职员工健康基线数据采集。'},
|
||||
{id:5, name:'慢病患者季度随访', org:'能源集团', dept:'工会', dateFrom:'2026-04-01', dateTo:'2026-06-30', personType:'指定人员', personCount:128, status:'进行中', leader:'孙丽', phone:'13800007890', surveys:['慢病管理随访问卷'], desc:'E类慢病患者第二季度定期随访。'}
|
||||
];
|
||||
|
||||
/* 参与人员模拟数据 */
|
||||
var allPersons = [
|
||||
{id:'001001', name:'张伟', org:'能源集团', dept:'人力资源部', done:true},
|
||||
{id:'001002', name:'李娜', org:'能源集团', dept:'人力资源部', done:true},
|
||||
{id:'001003', name:'王磊', org:'能源集团', dept:'人力资源部', done:false},
|
||||
{id:'002001', name:'赵敏', org:'能源集团', dept:'安全环保部', done:true},
|
||||
{id:'002002', name:'刘洋', org:'能源集团', dept:'安全环保部', done:true},
|
||||
{id:'002003', name:'陈晨', org:'能源集团', dept:'安全环保部', done:false},
|
||||
{id:'002004', name:'周杰', org:'能源集团', dept:'安全环保部', done:false},
|
||||
{id:'003001', name:'吴芳', org:'能源集团', dept:'工会', done:true},
|
||||
{id:'003002', name:'孙丽', org:'能源集团', dept:'工会', done:true},
|
||||
{id:'003003', name:'郑浩', org:'能源集团', dept:'工会', done:false},
|
||||
{id:'004001', name:'黄磊', org:'能源集团', dept:'生产技术部', done:true},
|
||||
{id:'004002', name:'林燕', org:'能源集团', dept:'生产技术部', done:true},
|
||||
{id:'004003', name:'何强', org:'能源集团', dept:'生产技术部', done:false},
|
||||
{id:'004004', name:'马超', org:'能源集团', dept:'生产技术部', done:true},
|
||||
{id:'005001', name:'杨丽', org:'能源集团', dept:'财务部', done:true},
|
||||
{id:'005002', name:'朱峰', org:'能源集团', dept:'财务部', done:false},
|
||||
{id:'006001', name:'徐明', org:'能源集团', dept:'信息中心', done:true},
|
||||
{id:'006002', name:'韩雪', org:'能源集团', dept:'信息中心', done:true},
|
||||
{id:'006003', name:'曹杰', org:'能源集团', dept:'信息中心', done:false},
|
||||
{id:'006004', name:'邓辉', org:'能源集团', dept:'信息中心', done:false}
|
||||
];
|
||||
|
||||
/* ===== 渲染表格 ===== */
|
||||
function renderTable(data){
|
||||
var html = '';
|
||||
data.forEach(function(a){
|
||||
html += '<tr>';
|
||||
html += '<td>'+esc(a.name)+'</td>';
|
||||
html += '<td>'+esc(a.org)+'</td>';
|
||||
html += '<td>'+esc(a.dept)+'</td>';
|
||||
html += '<td>'+a.dateFrom+' ~ '+a.dateTo+'</td>';
|
||||
html += '<td><span class="link link-clickable" onclick="openPersonModal('+a.id+')">'+a.personType+'（'+a.personCount+'人）</span></td>';
|
||||
html += '<td><span class="tag '+statusMap[a.status]+'">'+a.status+'</span></td>';
|
||||
html += '<td>'+esc(a.leader)+'</td>';
|
||||
html += '<td>'+a.phone+'</td>';
|
||||
html += '<td>';
|
||||
html += '<button class="link" onclick="openDetail('+a.id+')">活动详情</button>';
|
||||
html += '<span class="link-separator">|</span>';
|
||||
html += '<button class="link" onclick="openEdit('+a.id+')">编辑</button>';
|
||||
html += '<span class="link-separator">|</span>';
|
||||
html += '<button class="link link-danger" onclick="deleteActivity('+a.id+')">删除</button>';
|
||||
html += '</td></tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML = html || '<tr><td colspan="9" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
document.getElementById('totalCount').textContent = '共 '+data.length+' 条数据';
|
||||
document.getElementById('pageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
}
|
||||
|
||||
/* ===== 筛选 ===== */
|
||||
function filterTable(){
|
||||
var name = document.getElementById('filterName').value.trim().toLowerCase();
|
||||
var org = document.getElementById('filterOrg').value;
|
||||
var status = document.getElementById('filterStatus').value;
|
||||
var dateFrom = document.getElementById('filterDateFrom').value;
|
||||
var dateTo = document.getElementById('filterDateTo').value;
|
||||
var filtered = activities.filter(function(a){
|
||||
if(name && a.name.toLowerCase().indexOf(name) === -1) return false;
|
||||
if(org && a.org !== org) return false;
|
||||
if(status && a.status !== status) return false;
|
||||
if(dateFrom && a.dateTo < dateFrom) return false;
|
||||
if(dateTo && a.dateFrom > dateTo) return false;
|
||||
return true;
|
||||
});
|
||||
renderTable(filtered);
|
||||
}
|
||||
|
||||
function resetFilter(){
|
||||
document.getElementById('filterName').value = '';
|
||||
document.getElementById('filterOrg').value = '';
|
||||
document.getElementById('filterStatus').value = '';
|
||||
document.getElementById('filterDateFrom').value = '';
|
||||
document.getElementById('filterDateTo').value = '';
|
||||
renderTable(activities);
|
||||
}
|
||||
|
||||
/* ===== 弹窗 ===== */
|
||||
function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
|
||||
function openDetail(id){window.location.href='activity-detail.html?id='+id;}
|
||||
|
||||
function openPersonModal(id){
|
||||
var a = activities.find(function(x){return x.id === id;});
|
||||
if(!a) return;
|
||||
document.getElementById('personModalTitle').textContent = '参与人员 - '+esc(a.name);
|
||||
currentPersons = allPersons.slice();
|
||||
renderPersonTable(currentPersons);
|
||||
document.getElementById('personModal').classList.add('show');
|
||||
}
|
||||
|
||||
var currentPersons = [];
|
||||
|
||||
function renderPersonTable(data){
|
||||
var html = '';
|
||||
data.forEach(function(p){
|
||||
html += '<tr>';
|
||||
html += '<td>'+esc(p.org)+'</td>';
|
||||
html += '<td>'+esc(p.dept)+'</td>';
|
||||
html += '<td>'+esc(p.name)+'</td>';
|
||||
html += '<td>'+p.id+'</td>';
|
||||
html += '<td><span class="tag '+((p.done)?'tag-green':'tag-orange')+'">'+((p.done)?'已参加':'未参加')+'</span></td>';
|
||||
html += '</tr>';
|
||||
});
|
||||
document.getElementById('personTbody').innerHTML = html || '<tr><td colspan="5" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
document.getElementById('personPageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
// 统计
|
||||
var total = data.length;
|
||||
var done = data.filter(function(p){return p.done;}).length;
|
||||
document.getElementById('pTotalCount').textContent = total;
|
||||
document.getElementById('pDoneCount').textContent = done;
|
||||
document.getElementById('pPendingCount').textContent = total - done;
|
||||
}
|
||||
|
||||
function filterPersons(){
|
||||
var name = document.getElementById('pfName').value.trim().toLowerCase();
|
||||
var empId = document.getElementById('pfEmpId').value.trim().toLowerCase();
|
||||
var deptVal = document.getElementById('pfDept').value;
|
||||
var statusVal = document.getElementById('pfStatus').value;
|
||||
currentPersons = allPersons.filter(function(p){
|
||||
if(name && p.name.toLowerCase().indexOf(name) === -1) return false;
|
||||
if(empId && p.id.toLowerCase().indexOf(empId) === -1) return false;
|
||||
if(deptVal){
|
||||
var unitDept = p.org+'/'+p.dept;
|
||||
if(unitDept !== deptVal) return false;
|
||||
}
|
||||
if(statusVal === 'done' && !p.done) return false;
|
||||
if(statusVal === 'pending' && p.done) return false;
|
||||
return true;
|
||||
});
|
||||
renderPersonTable(currentPersons);
|
||||
}
|
||||
|
||||
function resetPersonFilter(){
|
||||
document.getElementById('pfName').value = '';
|
||||
document.getElementById('pfEmpId').value = '';
|
||||
document.getElementById('pfDept').value = '';
|
||||
document.getElementById('pfStatus').value = '';
|
||||
currentPersons = allPersons.slice();
|
||||
renderPersonTable(currentPersons);
|
||||
}
|
||||
|
||||
function openEdit(id){window.location.href='activity-edit.html';}
|
||||
|
||||
function deleteActivity(id){
|
||||
var a = activities.find(function(x){return x.id === id;});
|
||||
if(!a) return;
|
||||
if(confirm('确定要删除活动「'+a.name+'」吗？')){
|
||||
activities = activities.filter(function(x){return x.id !== id;});
|
||||
filterTable();
|
||||
}
|
||||
}
|
||||
|
||||
function esc(s){return (s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
/* ===== 初始化 ===== */
|
||||
renderTable(activities);
|
||||
|
||||
/* 点击遮罩关闭弹窗 */
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){
|
||||
m.addEventListener('click',function(e){if(e.target === m) closeModal(m.id);});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 活动统计 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;background:#fff;padding:16px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
/* 多选下拉 */
|
||||
.multi-select{position:relative;display:inline-block;min-width:200px;}
|
||||
.multi-select__trigger{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 32px 4px 8px;font-size:var(--font-sm);background:#fff;cursor:pointer;display:flex;align-items:center;gap:4px;flex-wrap:wrap;user-select:none;position:relative;}
|
||||
.multi-select__trigger::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top:5px solid #999;pointer-events:none;}
|
||||
.multi-select__trigger.placeholder{padding:0 32px 0 12px;color:var(--text-placeholder);align-items:center;}
|
||||
.multi-select__trigger .sel-tag{display:inline-flex;align-items:center;gap:2px;background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:var(--radius-sm);font-size:var(--font-xs);line-height:1.6;}
|
||||
.multi-select__trigger .sel-tag .tag-x{cursor:pointer;font-size:12px;line-height:1;margin-left:2px;}
|
||||
.multi-select__trigger .sel-tag .tag-x:hover{color:var(--danger);}
|
||||
.multi-select__panel{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:300;display:none;min-width:200px;padding:8px 0;}
|
||||
.multi-select__panel.show{display:block;}
|
||||
.multi-select__opt{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;}
|
||||
.multi-select__opt:hover{background:#F5F7FA;}
|
||||
.multi-select__opt.checked{color:var(--primary);background:var(--primary-light);}
|
||||
.multi-select__cb{width:14px;height:14px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
|
||||
.multi-select__cb.checked{background:var(--primary);border-color:var(--primary);}
|
||||
.multi-select__cb.checked::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px;}
|
||||
/* 工具栏 */
|
||||
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
|
||||
.toolbar .spacer{flex:1;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text-primary);transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.btn-primary:hover{background:#40a9ff;border-color:#40a9ff;color:#fff;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;background:none;border:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-separator{color:var(--border);margin:0 6px;user-select:none;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 24px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.pagination__pages{display:flex;align-items:center;gap:4px;}
|
||||
.page-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;}
|
||||
.page-item:hover{color:var(--primary);}
|
||||
.page-item.active{background:var(--primary);color:#fff;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="../archive-personal.html">档案</a>
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item active">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">活动名称</span>
|
||||
<input class="filter-input" id="filterName" placeholder="请输入活动名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">组织单位</span>
|
||||
<div class="multi-select" id="orgSelect">
|
||||
<div class="multi-select__trigger placeholder" onclick="toggleOrgSelect()">全部</div>
|
||||
<div class="multi-select__panel" id="orgPanel">
|
||||
<div class="multi-select__opt" data-val="全部" onclick="toggleOrgOpt(this,'全部')"><span class="multi-select__cb"></span>全部</div>
|
||||
<div class="multi-select__opt" data-val="能源集团" onclick="toggleOrgOpt(this,'能源集团')"><span class="multi-select__cb"></span>能源集团</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterTable()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="M10.5 10.5l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
<!-- 操作栏 -->
|
||||
<div class="toolbar">
|
||||
<button class="btn" onclick="alert('导出列表数据')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v8M4 6l3 3 3-3M2 11h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn" onclick="alert('查看导出任务')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.3"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">活动统计</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);" id="totalCount">共 0 条数据</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:18%;">活动名称</th>
|
||||
<th style="width:10%;">组织单位</th>
|
||||
<th style="width:10%;">组织部门</th>
|
||||
<th style="width:12%;">起止日期</th>
|
||||
<th style="width:8%;">应参加人数</th>
|
||||
<th style="width:8%;">已参加人数</th>
|
||||
<th style="width:8%;">未参加人数</th>
|
||||
<th style="width:8%;">活动状态</th>
|
||||
<th style="width:18%;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span class="pagination__total" id="pageTotal"></span>
|
||||
<div class="pagination__pages">
|
||||
<span class="page-item active">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
/* ===== 数据 ===== */
|
||||
var statusMap = {'待开始':'tag-blue','进行中':'tag-orange','已完成':'tag-green'};
|
||||
|
||||
var activities = [
|
||||
{id:1, name:'2026年上半年员工健康排查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-01-01', dateTo:'2026-03-31', personCount:1280, doneCount:1150, status:'已完成', leader:'张明', surveys:['健康记录问卷','职业健康排查问卷'], desc:'年度例行员工健康排查活动，覆盖全体员工。'},
|
||||
{id:2, name:'2026年Q2心理健康专项排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-04-01', dateTo:'2026-06-30', personCount:356, doneCount:280, status:'进行中', leader:'李华', surveys:['心理健康评估问卷'], desc:'针对C类和D类人群的心理健康专项排查。'},
|
||||
{id:3, name:'2026年Q3职业健康排查', org:'能源集团', dept:'安全环保部', dateFrom:'2026-07-01', dateTo:'2026-09-30', personCount:520, doneCount:0, status:'待开始', leader:'王强', surveys:['职业健康排查问卷','健康记录问卷'], desc:'第三季度职业健康专项排查，针对A类和B类人群。'},
|
||||
{id:4, name:'新员工入职健康基线调查', org:'能源集团', dept:'人力资源部', dateFrom:'2026-06-01', dateTo:'2026-12-31', personCount:85, doneCount:60, status:'进行中', leader:'赵芳', surveys:['新员工健康基线问卷'], desc:'2026年度新入职员工健康基线数据采集。'},
|
||||
{id:5, name:'慢病患者季度随访', org:'能源集团', dept:'工会', dateFrom:'2026-04-01', dateTo:'2026-06-30', personCount:128, doneCount:98, status:'进行中', leader:'孙丽', surveys:['慢病管理随访问卷'], desc:'E类慢病患者第二季度定期随访。'}
|
||||
];
|
||||
|
||||
/* 组织单位多选 */
|
||||
var filterOrgs = [];
|
||||
|
||||
function toggleOrgSelect(){
|
||||
var panel = document.getElementById('orgPanel');
|
||||
var isShow = panel.classList.contains('show');
|
||||
closeAllPanels();
|
||||
if(!isShow) panel.classList.add('show');
|
||||
}
|
||||
|
||||
function toggleOrgOpt(el, val){
|
||||
var cb = el.querySelector('.multi-select__cb');
|
||||
if(val === '全部'){
|
||||
filterOrgs = [];
|
||||
document.querySelectorAll('#orgPanel .multi-select__opt').forEach(function(opt){
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
});
|
||||
el.classList.add('checked');cb.classList.add('checked');
|
||||
} else {
|
||||
document.querySelector('#orgPanel .multi-select__opt[data-val="全部"]').classList.remove('checked');
|
||||
document.querySelector('#orgPanel .multi-select__opt[data-val="全部"]').querySelector('.multi-select__cb').classList.remove('checked');
|
||||
if(cb.classList.contains('checked')){
|
||||
el.classList.remove('checked');cb.classList.remove('checked');
|
||||
filterOrgs = filterOrgs.filter(function(c){return c!==val;});
|
||||
} else {
|
||||
el.classList.add('checked');cb.classList.add('checked');
|
||||
filterOrgs.push(val);
|
||||
}
|
||||
}
|
||||
updateOrgTrigger();
|
||||
}
|
||||
|
||||
function updateOrgTrigger(){
|
||||
var trigger = document.querySelector('#orgSelect .multi-select__trigger');
|
||||
if(filterOrgs.length===0){
|
||||
trigger.textContent = '全部';
|
||||
trigger.className = 'multi-select__trigger placeholder';
|
||||
} else {
|
||||
trigger.className = 'multi-select__trigger';
|
||||
var html = '';
|
||||
filterOrgs.forEach(function(c){
|
||||
html += '<span class="sel-tag">'+esc(c)+'<span class="tag-x" onclick="removeOrgTag(\''+c+'\')">×</span></span>';
|
||||
});
|
||||
trigger.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
function removeOrgTag(val){
|
||||
filterOrgs = filterOrgs.filter(function(c){return c!==val;});
|
||||
var opt = document.querySelector('#orgPanel .multi-select__opt[data-val="'+val+'"]');
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
updateOrgTrigger();
|
||||
}
|
||||
|
||||
function closeAllPanels(){
|
||||
document.querySelectorAll('.multi-select__panel').forEach(function(p){p.classList.remove('show');});
|
||||
}
|
||||
|
||||
/* ===== 渲染表格 ===== */
|
||||
function renderTable(data){
|
||||
var html = '';
|
||||
data.forEach(function(a){
|
||||
var pending = a.personCount - a.doneCount;
|
||||
html += '<tr>';
|
||||
html += '<td>'+esc(a.name)+'</td>';
|
||||
html += '<td>'+esc(a.org)+'</td>';
|
||||
html += '<td>'+esc(a.dept)+'</td>';
|
||||
html += '<td>'+a.dateFrom+' ~ '+a.dateTo+'</td>';
|
||||
html += '<td>'+a.personCount+'</td>';
|
||||
html += '<td style="color:var(--success);">'+a.doneCount+'</td>';
|
||||
html += '<td style="color:var(--danger);">'+pending+'</td>';
|
||||
html += '<td><span class="tag '+statusMap[a.status]+'">'+a.status+'</span></td>';
|
||||
html += '<td>';
|
||||
html += '<button class="link" onclick="window.location.href=\'activity-detail.html?id='+a.id+'\'">活动详情</button>';
|
||||
html += '</td></tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML = html || '<tr><td colspan="9" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
document.getElementById('totalCount').textContent = '共 '+data.length+' 条数据';
|
||||
document.getElementById('pageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
}
|
||||
|
||||
/* ===== 筛选 ===== */
|
||||
function filterTable(){
|
||||
var name = document.getElementById('filterName').value.trim().toLowerCase();
|
||||
var filtered = activities.filter(function(a){
|
||||
if(name && a.name.toLowerCase().indexOf(name) === -1) return false;
|
||||
if(filterOrgs.length > 0 && filterOrgs.indexOf(a.org) === -1) return false;
|
||||
return true;
|
||||
});
|
||||
renderTable(filtered);
|
||||
}
|
||||
|
||||
function resetFilter(){
|
||||
document.getElementById('filterName').value = '';
|
||||
filterOrgs = [];
|
||||
document.querySelectorAll('#orgPanel .multi-select__opt').forEach(function(opt){
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
});
|
||||
var allOpt = document.querySelector('#orgPanel .multi-select__opt[data-val="全部"]');
|
||||
allOpt.classList.add('checked');allOpt.querySelector('.multi-select__cb').classList.add('checked');
|
||||
updateOrgTrigger();
|
||||
renderTable(activities);
|
||||
}
|
||||
|
||||
function esc(s){return (s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
/* ===== 初始化 ===== */
|
||||
renderTable(activities);
|
||||
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('.multi-select')) closeAllPanels();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -94,7 +94,7 @@
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
@@ -103,14 +103,17 @@
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item active">格言管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
@@ -101,14 +101,17 @@
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<div class="sidebar-subgroup open">
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item active">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
@@ -112,14 +112,17 @@
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<div class="sidebar-subgroup open">
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item active">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item active">问题分类</a>
|
||||
@@ -135,14 +135,17 @@
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
|
||||
@@ -0,0 +1,782 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 新增问卷 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
--shadow-md:0 4px 12px rgba(0,0,0,0.10);
|
||||
--shadow-lg:0 8px 24px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
|
||||
/* ===== 左右布局 ===== */
|
||||
.editor-layout{display:flex;gap:20px;align-items:flex-start;}
|
||||
|
||||
/* 左侧：问卷信息 */
|
||||
.editor-left{width:320px;flex-shrink:0;position:sticky;top:80px;}
|
||||
.editor-left__card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;}
|
||||
.editor-left__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:8px;}
|
||||
.editor-left__title svg{width:20px;height:20px;color:var(--primary);}
|
||||
.form-group{margin-bottom:16px;}
|
||||
.form-group:last-child{margin-bottom:0;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;margin-bottom:6px;}
|
||||
.form-group label .req{color:var(--danger);margin-left:2px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;transition:border-color .2s;box-sizing:border-box;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;resize:vertical;min-height:80px;transition:border-color .2s;font-family:inherit;box-sizing:border-box;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
|
||||
/* 多选下拉 */
|
||||
.multi-select{position:relative;width:100%;}
|
||||
.multi-select__trigger{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 32px 4px 8px;font-size:var(--font-sm);background:#fff;cursor:pointer;display:flex;align-items:center;gap:4px;flex-wrap:wrap;user-select:none;position:relative;transition:border-color .2s;}
|
||||
.multi-select__trigger:hover{border-color:var(--primary);}
|
||||
.multi-select__trigger::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top:5px solid #999;pointer-events:none;}
|
||||
.multi-select__trigger.placeholder{padding:0 32px 0 12px;color:var(--text-placeholder);align-items:center;}
|
||||
.multi-select__trigger .sel-tag{display:inline-flex;align-items:center;gap:2px;background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:var(--radius-sm);font-size:var(--font-xs);line-height:1.6;}
|
||||
.multi-select__trigger .sel-tag .tag-x{cursor:pointer;font-size:12px;line-height:1;margin-left:2px;}
|
||||
.multi-select__trigger .sel-tag .tag-x:hover{color:var(--danger);}
|
||||
.multi-select__panel{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:500;display:none;padding:8px 0;}
|
||||
.multi-select__panel.show{display:block;}
|
||||
.multi-select__opt{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;}
|
||||
.multi-select__opt:hover{background:#F5F7FA;}
|
||||
.multi-select__opt.checked{color:var(--primary);background:var(--primary-light);}
|
||||
.multi-select__cb{width:14px;height:14px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
|
||||
.multi-select__cb.checked{background:var(--primary);border-color:var(--primary);}
|
||||
.multi-select__cb.checked::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px;}
|
||||
|
||||
/* 右侧：题目列表 */
|
||||
.editor-right{flex:1;min-width:0;}
|
||||
.question-area{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:visible;position:relative;}
|
||||
.question-area__header{padding:20px 32px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.question-area__title{font-size:var(--font-base);font-weight:600;}
|
||||
.question-area__count{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
|
||||
/* 题目卡片 */
|
||||
.question-card{padding:24px 32px;border-bottom:1px solid var(--border);position:relative;transition:background .15s;}
|
||||
.question-card:last-of-type{border-bottom:none;}
|
||||
.question-card:hover{background:#FAFBFC;}
|
||||
.question-card:hover .q-toolbar{opacity:1;pointer-events:auto;}
|
||||
.q-num{font-size:var(--font-sm);color:var(--primary);font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
|
||||
.q-type-badge{font-size:var(--font-xs);padding:1px 8px;border-radius:10px;font-weight:400;}
|
||||
.q-type-badge--radio{background:#E6F7FF;color:#1890FF;}
|
||||
.q-type-badge--checkbox{background:#F6FFED;color:#52C41A;}
|
||||
.q-type-badge--text{background:#F9F0FF;color:#722ED1;}
|
||||
.q-title-input{width:100%;border:none;border-bottom:1px solid var(--border);font-size:var(--font-base);font-weight:500;padding:4px 0;outline:none;background:transparent;color:var(--text-primary);}
|
||||
.q-title-input:focus{border-bottom-color:var(--primary);}
|
||||
.q-title-display{font-size:var(--font-base);font-weight:500;padding:4px 0;color:var(--text-primary);}
|
||||
.q-required{color:var(--danger);font-size:var(--font-xs);margin-left:6px;}
|
||||
|
||||
/* 选项 */
|
||||
.q-options{margin-top:16px;padding-left:0;}
|
||||
.q-option{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:var(--font-sm);}
|
||||
.q-option__radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s;}
|
||||
.q-option__radio.filled{border-color:var(--primary);}
|
||||
.q-option__radio.filled::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--primary);}
|
||||
.q-option__check{width:16px;height:16px;border-radius:3px;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
|
||||
.q-option__check.checked{background:var(--primary);border-color:var(--primary);}
|
||||
.q-option__check.checked::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px;}
|
||||
.q-option__label{flex:1;}
|
||||
.q-option__input{flex:1;border:none;border-bottom:1px solid var(--border);font-size:var(--font-sm);padding:2px 0;outline:none;background:transparent;color:var(--text-primary);}
|
||||
.q-option__input:focus{border-bottom-color:var(--primary);}
|
||||
.q-option__del{width:24px;height:24px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);opacity:0;transition:all .15s;}
|
||||
.q-option:hover .q-option__del{opacity:1;}
|
||||
.q-option__del:hover{background:#FFF1F0;color:var(--danger);}
|
||||
.q-add-option{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-size:var(--font-sm);cursor:pointer;padding:4px 0;border:none;background:none;margin-top:4px;}
|
||||
.q-add-option:hover{color:#40a9ff;}
|
||||
.q-text-input{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;min-height:80px;resize:vertical;color:var(--text-placeholder);}
|
||||
.q-text-input:focus{border-color:var(--primary);}
|
||||
.q-text-placeholder{color:var(--text-placeholder);font-size:var(--font-sm);padding:8px 12px;}
|
||||
|
||||
/* 题目工具栏 */
|
||||
.q-toolbar{position:absolute;bottom:8px;right:8px;display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:4px 6px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;white-space:nowrap;}
|
||||
.q-toolbar__btn{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);transition:all .12s;font-size:var(--font-xs);line-height:1;}
|
||||
.q-toolbar__btn svg{flex-shrink:0;}
|
||||
.q-toolbar__btn:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.q-toolbar__btn.danger:hover{background:#FFF1F0;color:var(--danger);}
|
||||
.q-toolbar__btn[disabled]{opacity:0.3;pointer-events:none;}
|
||||
.q-toolbar__sep{width:1px;height:14px;background:var(--border);margin:0 4px;}
|
||||
|
||||
/* 题目底部操作 */
|
||||
.q-footer{margin-top:20px;display:flex;align-items:center;gap:12px;}
|
||||
.q-footer .btn{height:32px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-ghost{background:none;color:var(--text-secondary);border:none;}.btn-ghost:hover{color:var(--primary);}
|
||||
.btn-sm{height:28px;padding:0 12px;font-size:var(--font-xs);}
|
||||
|
||||
/* 添加题目区 */
|
||||
.editor-footer{padding:20px 32px;border-top:1px solid var(--border);}
|
||||
|
||||
/* 添加题目类型面板 */
|
||||
.add-type-panel{position:relative;display:inline-block;}
|
||||
.add-type-btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:1px dashed var(--primary);background:var(--primary-light);color:var(--primary);transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.add-type-btn:hover{background:var(--primary);color:#fff;}
|
||||
.add-type-dropdown{position:absolute;bottom:100%;left:0;margin-bottom:8px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:500;display:none;min-width:240px;padding:8px 0;}
|
||||
.add-type-dropdown.show{display:block;}
|
||||
.add-type-dropdown__item{display:flex;align-items:center;gap:12px;padding:10px 20px;font-size:var(--font-sm);cursor:pointer;transition:background .12s;}
|
||||
.add-type-dropdown__item:hover{background:#F5F7FA;}
|
||||
.add-type-dropdown__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0;}
|
||||
.add-type-dropdown__icon--radio{background:#1890FF;}
|
||||
.add-type-dropdown__icon--checkbox{background:#52C41A;}
|
||||
.add-type-dropdown__icon--text{background:#722ED1;}
|
||||
.add-type-dropdown__info{display:flex;flex-direction:column;}
|
||||
.add-type-dropdown__name{font-weight:500;color:var(--text-primary);}
|
||||
.add-type-dropdown__desc{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;}
|
||||
|
||||
/* 完成/编辑模式切换 */
|
||||
.q-edit-mode .q-title-display{display:none;}
|
||||
.q-edit-mode .q-title-input{display:block;}
|
||||
.q-view-mode .q-title-input{display:none;}
|
||||
.q-view-mode .q-options .q-option__input{display:none;}
|
||||
.q-view-mode .q-options .q-option__label{border-bottom:none;}
|
||||
.q-view-mode .q-option__del{display:none !important;}
|
||||
.q-view-mode .q-add-option{display:none !important;}
|
||||
.q-view-mode .q-text-input{border:none;background:#F5F7FA;color:var(--text-primary);}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state{text-align:center;padding:60px 20px;color:var(--text-placeholder);}
|
||||
.empty-state svg{width:80px;height:80px;margin-bottom:16px;opacity:0.3;}
|
||||
.empty-state__title{font-size:var(--font-base);margin-bottom:8px;color:var(--text-secondary);}
|
||||
.empty-state__desc{font-size:var(--font-sm);}
|
||||
|
||||
/* 保存栏 */
|
||||
.save-bar{position:fixed;bottom:0;left:240px;right:0;background:#fff;border-top:1px solid var(--border);padding:12px 32px;display:flex;align-items:center;justify-content:space-between;z-index:90;box-shadow:0 -2px 8px rgba(0,0,0,0.06);}
|
||||
.save-bar__left{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.save-bar__right{display:flex;gap:12px;}
|
||||
.save-bar .btn{height:36px;padding:0 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
|
||||
|
||||
/* toast */
|
||||
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;}
|
||||
.toast.show{opacity:1;}
|
||||
|
||||
/* ===== 跳题逻辑按钮 ===== */
|
||||
.skip-btn{height:32px;padding:0 14px;border-radius:var(--radius-sm);font-size:var(--font-xs);cursor:pointer;border:1px dashed var(--primary);background:var(--primary-light);color:var(--primary);transition:all .15s;display:inline-flex;align-items:center;gap:5px;}
|
||||
.skip-btn:hover{background:var(--primary);color:#fff;border-style:solid;}
|
||||
.skip-btn--set{border:1px solid #1890FF;background:#E6F7FF;color:#0958D9;}
|
||||
.skip-btn--set:hover{background:#BAE0FF;border-color:#40a9ff;}
|
||||
.skip-btn svg{flex-shrink:0;}
|
||||
|
||||
/* ===== 跳题逻辑弹窗 ===== */
|
||||
.skip-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:800;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s;}
|
||||
.skip-mask.show{opacity:1;pointer-events:auto;}
|
||||
.skip-modal{background:#fff;border-radius:var(--radius-lg);width:560px;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
.skip-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.skip-modal__header h3{font-size:var(--font-lg);font-weight:600;}
|
||||
.skip-modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:20px;color:var(--text-secondary);border-radius:var(--radius-sm);}
|
||||
.skip-modal__close:hover{background:#f5f5f5;}
|
||||
.skip-modal__body{padding:20px 24px;}
|
||||
.skip-modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
|
||||
/* 跳题行 */
|
||||
.skip-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;transition:border-color .15s;}
|
||||
.skip-row:last-child{margin-bottom:0;}
|
||||
.skip-row:hover{border-color:#BAE0FF;}
|
||||
.skip-row__opt{flex:1;font-size:var(--font-sm);font-weight:500;color:var(--text-primary);display:flex;align-items:center;gap:8px;}
|
||||
.skip-row__opt .q-option__radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;}
|
||||
.skip-row__arrow{color:var(--text-placeholder);font-size:var(--font-sm);flex-shrink:0;}
|
||||
.skip-row__select{flex:1;height:34px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 10px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;cursor:pointer;appearance:none;}
|
||||
.skip-row__select:focus{border-color:var(--primary);}
|
||||
.skip-row__clear{width:28px;height:28px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);flex-shrink:0;transition:all .15s;}
|
||||
.skip-row__clear:hover{background:#FFF1F0;color:var(--danger);}
|
||||
|
||||
/* ===== 查看模式跳题提示 ===== */
|
||||
.skip-hint{margin-top:12px;padding:8px 12px;background:#FFFBE6;border:1px solid #FFE58F;border-radius:var(--radius-sm);font-size:var(--font-xs);color:#AD6800;display:flex;align-items:center;gap:6px;}
|
||||
.skip-hint svg{flex-shrink:0;}
|
||||
.skip-error{margin-top:12px;padding:8px 12px;background:rgba(255,77,79,0.08);border:1px solid rgba(255,77,79,0.3);border-radius:var(--radius-sm);font-size:var(--font-xs);color:var(--danger);display:flex;align-items:center;gap:6px;font-weight:500;}
|
||||
.skip-error svg{flex-shrink:0;}
|
||||
.q-option__jump{font-size:var(--font-xs);color:#AD6800;margin-left:4px;}
|
||||
/* 跳题逻辑无效的题目卡片 */
|
||||
.question-card.skip-invalid{background:rgba(255,77,79,0.05);}
|
||||
.question-card.skip-invalid:hover{background:rgba(255,77,79,0.08);}
|
||||
|
||||
/* 主内容底部留白 */
|
||||
.main{padding-bottom:80px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="../archive-personal.html">档案</a>
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="editor-layout">
|
||||
<!-- 左侧：问卷信息 -->
|
||||
<div class="editor-left">
|
||||
<div class="editor-left__card">
|
||||
<div class="editor-left__title">
|
||||
<svg viewBox="0 0 20 20" fill="none"><path d="M3 2h10l4 4v12H3V2z" stroke="currentColor" stroke-width="1.5"/><path d="M13 2v4h4" stroke="currentColor" stroke-width="1.5"/><line x1="6" y1="10" x2="14" y2="10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><line x1="6" y1="13.5" x2="11" y2="13.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
问卷信息
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>问卷名称 <span class="req">*</span></label>
|
||||
<input class="form-input" id="surveyName" placeholder="请输入问卷名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>适应人群 <span class="req">*</span></label>
|
||||
<div class="multi-select" id="crowdSelect">
|
||||
<div class="multi-select__trigger placeholder" onclick="toggleCrowdSelect()">请选择适应人群</div>
|
||||
<div class="multi-select__panel" id="crowdPanel">
|
||||
<div class="multi-select__opt" data-val="A类" onclick="toggleCrowdOpt(this,'A类')"><span class="multi-select__cb"></span>A类</div>
|
||||
<div class="multi-select__opt" data-val="B类" onclick="toggleCrowdOpt(this,'B类')"><span class="multi-select__cb"></span>B类</div>
|
||||
<div class="multi-select__opt" data-val="C类" onclick="toggleCrowdOpt(this,'C类')"><span class="multi-select__cb"></span>C类</div>
|
||||
<div class="multi-select__opt" data-val="D类" onclick="toggleCrowdOpt(this,'D类')"><span class="multi-select__cb"></span>D类</div>
|
||||
<div class="multi-select__opt" data-val="E类" onclick="toggleCrowdOpt(this,'E类')"><span class="multi-select__cb"></span>E类</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>问卷描述</label>
|
||||
<textarea class="form-textarea" id="surveyDesc" placeholder="请输入问卷描述（选填）"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧：题目列表 -->
|
||||
<div class="editor-right">
|
||||
<div class="question-area">
|
||||
<div class="question-area__header">
|
||||
<span class="question-area__title">题目列表</span>
|
||||
<span class="question-area__count" id="questionCount">共 0 题</span>
|
||||
</div>
|
||||
<!-- 题目容器 -->
|
||||
<div id="questionList"></div>
|
||||
<!-- 空状态 -->
|
||||
<div id="emptyState" class="empty-state">
|
||||
<svg viewBox="0 0 80 80" fill="none"><rect x="10" y="8" width="60" height="64" rx="6" stroke="currentColor" stroke-width="2" stroke-dasharray="4 3"/><path d="M28 30h24M28 40h18M28 50h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<div class="empty-state__title">暂无题目</div>
|
||||
<div class="empty-state__desc">点击下方「添加题目」按钮开始设计问卷</div>
|
||||
</div>
|
||||
<!-- 添加题目按钮 -->
|
||||
<div class="editor-footer">
|
||||
<div class="add-type-panel">
|
||||
<button class="add-type-btn" onclick="toggleAddType()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
添加题目
|
||||
</button>
|
||||
<div class="add-type-dropdown" id="addTypeDropdown">
|
||||
<div class="add-type-dropdown__item" onclick="addQuestion('radio')">
|
||||
<div class="add-type-dropdown__icon add-type-dropdown__icon--radio">○</div>
|
||||
<div class="add-type-dropdown__info">
|
||||
<span class="add-type-dropdown__name">单选题</span>
|
||||
<span class="add-type-dropdown__desc">只能选择一个选项</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-type-dropdown__item" onclick="addQuestion('checkbox')">
|
||||
<div class="add-type-dropdown__icon add-type-dropdown__icon--checkbox">☑</div>
|
||||
<div class="add-type-dropdown__info">
|
||||
<span class="add-type-dropdown__name">多选题</span>
|
||||
<span class="add-type-dropdown__desc">可以选择多个选项</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-type-dropdown__item" onclick="addQuestion('text')">
|
||||
<div class="add-type-dropdown__icon add-type-dropdown__icon--text">文</div>
|
||||
<div class="add-type-dropdown__info">
|
||||
<span class="add-type-dropdown__name">填空题</span>
|
||||
<span class="add-type-dropdown__desc">可以自由填写文字内容</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部保存栏 -->
|
||||
<div class="save-bar">
|
||||
<div class="save-bar__left">
|
||||
<span id="saveBarInfo">问卷名称未填写</span>
|
||||
</div>
|
||||
<div class="save-bar__right">
|
||||
<button class="btn btn-default" onclick="backToManage()">返回</button>
|
||||
<button class="btn btn-primary" onclick="saveSurvey()">保存问卷</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<!-- 跳题逻辑弹窗 -->
|
||||
<div class="skip-mask" id="skipMask">
|
||||
<div class="skip-modal">
|
||||
<div class="skip-modal__header">
|
||||
<h3 id="skipModalTitle">设置跳题逻辑</h3>
|
||||
<button class="skip-modal__close" onclick="closeSkipModal()">×</button>
|
||||
</div>
|
||||
<div class="skip-modal__body" id="skipModalBody"></div>
|
||||
<div class="skip-modal__footer">
|
||||
<button class="btn btn-default" onclick="closeSkipModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveSkipLogic()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
/* ===== 数据 ===== */
|
||||
var surveyCrowds = [];
|
||||
var questions = [];
|
||||
var editingId = null;
|
||||
var qIdCounter = 0;
|
||||
|
||||
/* ===== 适应人群多选 ===== */
|
||||
function toggleCrowdSelect(){
|
||||
var panel = document.getElementById('crowdPanel');
|
||||
var isShow = panel.classList.contains('show');
|
||||
closeAllPanels();
|
||||
if(!isShow) panel.classList.add('show');
|
||||
}
|
||||
function toggleCrowdOpt(el, val){
|
||||
var cb = el.querySelector('.multi-select__cb');
|
||||
if(cb.classList.contains('checked')){
|
||||
el.classList.remove('checked');cb.classList.remove('checked');
|
||||
surveyCrowds = surveyCrowds.filter(function(c){return c!==val;});
|
||||
} else {
|
||||
el.classList.add('checked');cb.classList.add('checked');
|
||||
surveyCrowds.push(val);
|
||||
}
|
||||
updateCrowdTrigger();
|
||||
}
|
||||
function updateCrowdTrigger(){
|
||||
var trigger = document.querySelector('#crowdSelect .multi-select__trigger');
|
||||
if(surveyCrowds.length===0){
|
||||
trigger.textContent = '请选择适应人群';
|
||||
trigger.className = 'multi-select__trigger placeholder';
|
||||
} else {
|
||||
trigger.className = 'multi-select__trigger';
|
||||
var html = '';
|
||||
surveyCrowds.forEach(function(c){
|
||||
html += '<span class="sel-tag">'+c+'<span class="tag-x" onclick="removeCrowdTag(\''+c+'\')">×</span></span>';
|
||||
});
|
||||
trigger.innerHTML = html;
|
||||
}
|
||||
}
|
||||
function removeCrowdTag(val){
|
||||
surveyCrowds = surveyCrowds.filter(function(c){return c!==val;});
|
||||
var opt = document.querySelector('#crowdPanel .multi-select__opt[data-val="'+val+'"]');
|
||||
opt.classList.remove('checked');opt.querySelector('.multi-select__cb').classList.remove('checked');
|
||||
updateCrowdTrigger();
|
||||
}
|
||||
|
||||
/* ===== 关闭所有面板 ===== */
|
||||
function closeAllPanels(){
|
||||
document.getElementById('crowdPanel').classList.remove('show');
|
||||
document.getElementById('addTypeDropdown').classList.remove('show');
|
||||
}
|
||||
|
||||
/* ===== 添加题目类型面板 ===== */
|
||||
function toggleAddType(){
|
||||
var dd = document.getElementById('addTypeDropdown');
|
||||
var isShow = dd.classList.contains('show');
|
||||
closeAllPanels();
|
||||
if(!isShow) dd.classList.add('show');
|
||||
}
|
||||
|
||||
/* ===== 添加题目 ===== */
|
||||
function addQuestion(type){
|
||||
document.getElementById('addTypeDropdown').classList.remove('show');
|
||||
qIdCounter++;
|
||||
var q = {
|
||||
id: qIdCounter,
|
||||
type: type,
|
||||
title: '',
|
||||
required: true,
|
||||
options: type === 'text' ? [] : ['选项1','选项2'],
|
||||
mode: 'edit',
|
||||
skipLogic: {} // {optIdx: targetQuestionId}
|
||||
};
|
||||
questions.push(q);
|
||||
editingId = q.id;
|
||||
renderAll();
|
||||
setTimeout(function(){
|
||||
var el = document.getElementById('q-'+q.id);
|
||||
if(el){el.scrollIntoView({behavior:'smooth',block:'center'});var inp=el.querySelector('.q-title-input');if(inp)inp.focus();}
|
||||
},50);
|
||||
}
|
||||
|
||||
/* ===== 删除题目 ===== */
|
||||
function deleteQuestion(id){
|
||||
if(!confirm('确定要删除这道题目吗？')) return;
|
||||
questions = questions.filter(function(q){return q.id!==id;});
|
||||
if(editingId===id) editingId=null;
|
||||
renderAll();showToast('已删除');
|
||||
}
|
||||
|
||||
/* ===== 复制题目 ===== */
|
||||
function copyQuestion(id){
|
||||
var src = questions.find(function(q){return q.id===id;});
|
||||
if(!src) return;
|
||||
qIdCounter++;
|
||||
var copy = JSON.parse(JSON.stringify(src));
|
||||
copy.id = qIdCounter; copy.mode = 'edit';
|
||||
copy.title = src.title + '（副本）';
|
||||
var idx = questions.indexOf(src);
|
||||
questions.splice(idx+1, 0, copy);
|
||||
editingId = copy.id;
|
||||
renderAll();showToast('已复制');
|
||||
setTimeout(function(){var el=document.getElementById('q-'+copy.id);if(el)el.scrollIntoView({behavior:'smooth',block:'center'});},50);
|
||||
}
|
||||
|
||||
/* ===== 移动题目 ===== */
|
||||
function moveQuestion(id, dir){
|
||||
var idx = questions.findIndex(function(q){return q.id===id;});
|
||||
if(idx<0) return;
|
||||
if(dir==='up'&&idx>0) swap(idx,idx-1);
|
||||
else if(dir==='down'&&idx<questions.length-1) swap(idx,idx+1);
|
||||
else if(dir==='top'&&idx>0){var q=questions.splice(idx,1)[0];questions.unshift(q);}
|
||||
else if(dir==='bottom'&&idx<questions.length-1){var q=questions.splice(idx,1)[0];questions.push(q);}
|
||||
renderAll();
|
||||
}
|
||||
function swap(a,b){var t=questions[a];questions[a]=questions[b];questions[b]=t;}
|
||||
|
||||
/* ===== 切换模式 ===== */
|
||||
function switchMode(id, mode){
|
||||
var q = questions.find(function(x){return x.id===id;});
|
||||
if(!q) return;
|
||||
q.mode = mode;
|
||||
if(mode==='edit') editingId=id;
|
||||
renderAll();
|
||||
}
|
||||
|
||||
/* ===== 选项操作 ===== */
|
||||
function editOption(qId, optIdx, val){var q=questions.find(function(x){return x.id===qId;});if(q)q.options[optIdx]=val;}
|
||||
function addOption(qId){var q=questions.find(function(x){return x.id===qId;});if(!q)return;q.options.push('选项'+(q.options.length+1));renderAll();}
|
||||
function removeOption(qId, optIdx){var q=questions.find(function(x){return x.id===qId;});if(!q||q.options.length<=2)return;q.options.splice(optIdx,1);renderAll();}
|
||||
function editTitle(id, val){var q=questions.find(function(x){return x.id===id;});if(q)q.title=val;}
|
||||
function toggleRequired(id){var q=questions.find(function(x){return x.id===id;});if(q)q.required=!q.required;}
|
||||
|
||||
/* ===== 渲染 ===== */
|
||||
function renderAll(){
|
||||
var list = document.getElementById('questionList');
|
||||
var empty = document.getElementById('emptyState');
|
||||
if(questions.length===0){list.innerHTML='';empty.style.display='';}
|
||||
else{
|
||||
empty.style.display='none';
|
||||
var html='';
|
||||
questions.forEach(function(q,qi){html+=renderQuestion(q,qi);});
|
||||
list.innerHTML=html;
|
||||
}
|
||||
document.getElementById('questionCount').textContent='共 '+questions.length+' 题';
|
||||
updateSaveBar();
|
||||
}
|
||||
|
||||
function renderQuestion(q, qi){
|
||||
var isEdit = q.mode==='edit';
|
||||
var typeLabel = q.type==='radio'?'单选题':q.type==='checkbox'?'多选题':'填空题';
|
||||
var badgeCls = q.type==='radio'?'q-type-badge--radio':q.type==='checkbox'?'q-type-badge--checkbox':'q-type-badge--text';
|
||||
var modeCls = isEdit?'q-edit-mode':'q-view-mode';
|
||||
var isLast=qi===questions.length-1, isFirst=qi===0;
|
||||
var isInvalid = q.type==='radio' && q.skipLogic && Object.keys(q.skipLogic).length>0 && !checkSkipValid(q);
|
||||
var cardCls = modeCls + (isInvalid?' skip-invalid':'');
|
||||
var html = '<div class="question-card '+cardCls+'" id="q-'+q.id+'">';
|
||||
|
||||
// 工具栏
|
||||
html += '<div class="q-toolbar">';
|
||||
if(isEdit){
|
||||
html += '<button class="q-toolbar__btn" onclick="switchMode('+q.id+',\'view\')"><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>完成</button>';
|
||||
} else {
|
||||
html += '<button class="q-toolbar__btn" onclick="switchMode('+q.id+',\'edit\')"><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M9 2l3 3-8 8H1v-3L9 2z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>编辑</button>';
|
||||
}
|
||||
html += '<button class="q-toolbar__btn" onclick="copyQuestion('+q.id+')"><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><rect x="4" y="4" width="8" height="8" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M10 4V2.5A1.5 1.5 0 008.5 1h-6A1.5 1.5 0 001 2.5v6A1.5 1.5 0 002.5 10H4" stroke="currentColor" stroke-width="1.3"/></svg>复制</button>';
|
||||
if(q.type==='radio'){
|
||||
var hasSkip = q.skipLogic && Object.keys(q.skipLogic).length>0;
|
||||
html += '<button class="q-toolbar__btn" onclick="openSkipModal('+q.id+')"><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M8 2L3 7l5 5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 7h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>跳题</button>';
|
||||
}
|
||||
html += '<div class="q-toolbar__sep"></div>';
|
||||
html += '<button class="q-toolbar__btn" onclick="moveQuestion('+q.id+',\'top\')"'+(isFirst?' disabled':'')+'><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M7 12V2M4 5l3-3 3 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>最前</button>';
|
||||
html += '<button class="q-toolbar__btn" onclick="moveQuestion('+q.id+',\'up\')"'+(isFirst?' disabled':'')+'><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M7 11V3M4 6l3-3 3 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>上移</button>';
|
||||
html += '<button class="q-toolbar__btn" onclick="moveQuestion('+q.id+',\'down\')"'+(isLast?' disabled':'')+'><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M7 3v8M4 8l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>下移</button>';
|
||||
html += '<button class="q-toolbar__btn" onclick="moveQuestion('+q.id+',\'bottom\')"'+(isLast?' disabled':'')+'><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M4 9l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>最后</button>';
|
||||
html += '<div class="q-toolbar__sep"></div>';
|
||||
html += '<button class="q-toolbar__btn danger" onclick="deleteQuestion('+q.id+')"><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M2 4h10M5 4V2.5h4V4M4.5 4v7.5a1 1 0 001 1h3a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M6 6v3M8 6v3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>删除</button>';
|
||||
html += '</div>';
|
||||
|
||||
// 题号 + 类型
|
||||
html += '<div class="q-num"><span>第'+(qi+1)+'题</span><span class="q-type-badge '+badgeCls+'">'+typeLabel+'</span>';
|
||||
if(isEdit){
|
||||
html += '<label style="font-size:var(--font-xs);color:var(--text-secondary);margin-left:auto;display:flex;align-items:center;gap:4px;cursor:pointer;"><input type="checkbox" '+(q.required?'checked':'')+' onclick="toggleRequired('+q.id+')" style="width:14px;height:14px;cursor:pointer;"> 必填</label>';
|
||||
} else {
|
||||
if(q.required) html += '<span class="q-required">*必填</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
// 标题
|
||||
if(isEdit){
|
||||
html += '<input class="q-title-input" value="'+esc(q.title)+'" placeholder="请输入题目内容" oninput="editTitle('+q.id+',this.value)">';
|
||||
} else {
|
||||
html += '<div class="q-title-display">'+(q.title||'<span style="color:var(--text-placeholder)">未填写题目</span>')+'</div>';
|
||||
}
|
||||
|
||||
// 选项
|
||||
if(q.type==='text'){
|
||||
if(isEdit){
|
||||
html += '<textarea class="q-text-input" placeholder="填写提示：请输入您的回答..."></textarea>';
|
||||
} else {
|
||||
html += '<div class="q-text-placeholder">填写提示：请输入您的回答...</div>';
|
||||
}
|
||||
} else {
|
||||
html += '<div class="q-options">';
|
||||
var iconHtml = q.type==='radio'
|
||||
? '<span class="q-option__radio"></span>'
|
||||
: '<span class="q-option__check"></span>';
|
||||
q.options.forEach(function(opt,oi){
|
||||
html += '<div class="q-option">';
|
||||
html += iconHtml;
|
||||
if(isEdit){
|
||||
html += '<input class="q-option__input" value="'+esc(opt)+'" oninput="editOption('+q.id+','+oi+',this.value)">';
|
||||
html += '<button class="q-option__del" onclick="removeOption('+q.id+','+oi+')" title="删除"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>';
|
||||
} else {
|
||||
html += '<span class="q-option__label">'+opt;
|
||||
// 显示跳题目标
|
||||
if(q.type==='radio' && q.skipLogic && q.skipLogic[oi]){
|
||||
var targetId = q.skipLogic[oi];
|
||||
var target = getQuestionById(targetId);
|
||||
if(target){
|
||||
var targetIdx = questions.indexOf(target)+1;
|
||||
var titleText = target.title ? '第'+targetIdx+'题 '+target.title : '第'+targetIdx+'题';
|
||||
html += '<span class="q-option__jump">（跳转至 - '+esc(titleText)+'）</span>';
|
||||
}
|
||||
}
|
||||
html += '</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
if(isEdit){
|
||||
html += '<button class="q-add-option" onclick="addOption('+q.id+')"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>添加选项</button>';
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// 查看模式：跳题提示
|
||||
if(!isEdit && q.type==='radio' && q.skipLogic && Object.keys(q.skipLogic).length>0){
|
||||
if(!checkSkipValid(q)){
|
||||
html += '<div class="skip-error"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.3"/><path d="M7 4.5v2.5M7 9v.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>跳题逻辑必须设置为跳转到本题后面的题目</div>';
|
||||
} else {
|
||||
html += '<div class="skip-hint"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M8 2L3 7l5 5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 7h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>此题设置了跳题逻辑</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// 底部按钮
|
||||
if(isEdit){
|
||||
html += '<div class="q-footer">';
|
||||
html += '<button class="btn btn-primary btn-sm" onclick="switchMode('+q.id+',\'view\')"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>完成</button>';
|
||||
// 跳题逻辑按钮（仅单选）
|
||||
if(q.type==='radio'){
|
||||
var hasSkip = q.skipLogic && Object.keys(q.skipLogic).length>0;
|
||||
html += '<button class="skip-btn'+(hasSkip?' skip-btn--set':'')+'" onclick="openSkipModal('+q.id+')"><svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M8 2L3 7l5 5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 7h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>'+(hasSkip?'已设置跳题':'跳题逻辑')+'</button>';
|
||||
}
|
||||
html += '<button class="btn btn-ghost btn-sm" onclick="deleteQuestion('+q.id+')">删除此题</button>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function esc(s){return (s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
/* ===== 保存栏 ===== */
|
||||
function updateSaveBar(){
|
||||
var name = document.getElementById('surveyName').value.trim();
|
||||
document.getElementById('saveBarInfo').textContent = name ? name : '问卷名称未填写';
|
||||
}
|
||||
document.getElementById('surveyName').addEventListener('input', updateSaveBar);
|
||||
|
||||
function saveSurvey(){
|
||||
var name = document.getElementById('surveyName').value.trim();
|
||||
if(!name){alert('请输入问卷名称');return;}
|
||||
if(surveyCrowds.length===0){alert('请选择适应人群');return;}
|
||||
if(questions.length===0){alert('请至少添加一道题目');return;}
|
||||
showToast('保存成功！');
|
||||
}
|
||||
|
||||
function backToManage(){window.location.href='survey-manage.html';}
|
||||
|
||||
function showToast(msg){
|
||||
var t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
|
||||
setTimeout(function(){t.classList.remove('show');},1500);
|
||||
}
|
||||
|
||||
/* ===== 点击外部关闭 ===== */
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('#crowdSelect')) document.getElementById('crowdPanel').classList.remove('show');
|
||||
if(!e.target.closest('.add-type-panel')) document.getElementById('addTypeDropdown').classList.remove('show');
|
||||
});
|
||||
|
||||
/* ===== 跳题逻辑 ===== */
|
||||
var skipQId = null; // 当前设置跳题的题目ID
|
||||
|
||||
function getQuestionById(id){
|
||||
return questions.find(function(q){return q.id===id;});
|
||||
}
|
||||
|
||||
/* 检查跳题逻辑是否有效（跳转目标必须在当前题目之后） */
|
||||
function checkSkipValid(q){
|
||||
if(!q.skipLogic) return true;
|
||||
var qi = questions.indexOf(q);
|
||||
var ids = Object.values(q.skipLogic);
|
||||
for(var i=0;i<ids.length;i++){
|
||||
var targetIdx = questions.findIndex(function(x){return x.id===ids[i];});
|
||||
if(targetIdx<=qi) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function hasAnySkipLogic(q){
|
||||
return q.skipLogic && Object.keys(q.skipLogic).length>0;
|
||||
}
|
||||
|
||||
function openSkipModal(id){
|
||||
skipQId = id;
|
||||
var q = getQuestionById(id);
|
||||
if(!q) return;
|
||||
var qi = questions.indexOf(q);
|
||||
document.getElementById('skipModalTitle').textContent = '设置跳题逻辑 - '+esc(q.title||'第'+(qi+1)+'题');
|
||||
renderSkipModalBody(q);
|
||||
document.getElementById('skipMask').classList.add('show');
|
||||
}
|
||||
|
||||
function renderSkipModalBody(q){
|
||||
var html = '<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;">选择每个选项对应的跳转题目：</div>';
|
||||
q.options.forEach(function(opt,oi){
|
||||
html += '<div class="skip-row">';
|
||||
html += '<div class="skip-row__opt"><span class="q-option__radio"></span>'+esc(opt)+'</div>';
|
||||
html += '<span class="skip-row__arrow">→</span>';
|
||||
html += '<select class="skip-row__select" data-oi="'+oi+'">';
|
||||
html += '<option value="">请选择要跳转的题目</option>';
|
||||
// 列出当前题目之后的所有题目
|
||||
var qi = questions.indexOf(q);
|
||||
for(var j=qi+1;j<questions.length;j++){
|
||||
var tq = questions[j];
|
||||
var sel = q.skipLogic && q.skipLogic[oi]===tq.id ? ' selected' : '';
|
||||
html += '<option value="'+tq.id+'"'+sel+'>'+esc(tq.title||'第'+(j+1)+'题')+'（'+(tq.type==='radio'?'单选题':tq.type==='checkbox'?'多选题':'填空题')+'）</option>';
|
||||
}
|
||||
html += '</select>';
|
||||
html += '<button class="skip-row__clear" onclick="clearSkipOpt('+oi+')" title="清除"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>';
|
||||
html += '</div>';
|
||||
});
|
||||
document.getElementById('skipModalBody').innerHTML = html;
|
||||
}
|
||||
|
||||
function clearSkipOpt(oi){
|
||||
var q = getQuestionById(skipQId);
|
||||
if(!q) return;
|
||||
delete q.skipLogic[oi];
|
||||
// 更新select值
|
||||
var sel = document.querySelector('.skip-row__select[data-oi="'+oi+'"]');
|
||||
if(sel) sel.value = '';
|
||||
}
|
||||
|
||||
function saveSkipLogic(){
|
||||
var q = getQuestionById(skipQId);
|
||||
if(!q) return;
|
||||
// 读取select值
|
||||
q.skipLogic = {};
|
||||
var hasInvalid = false;
|
||||
var qi = questions.indexOf(q);
|
||||
document.querySelectorAll('.skip-row__select').forEach(function(sel){
|
||||
var oi = sel.getAttribute('data-oi');
|
||||
var val = sel.value;
|
||||
if(val){
|
||||
var targetIdx = questions.findIndex(function(x){return x.id===parseInt(val);});
|
||||
if(targetIdx<=qi){hasInvalid=true;}
|
||||
q.skipLogic[oi] = parseInt(val);
|
||||
}
|
||||
});
|
||||
closeSkipModal();
|
||||
renderAll();
|
||||
if(hasInvalid){
|
||||
showToast('保存成功，但存在无效跳题逻辑');
|
||||
} else {
|
||||
showToast('跳题逻辑已保存');
|
||||
}
|
||||
}
|
||||
|
||||
function closeSkipModal(){
|
||||
document.getElementById('skipMask').classList.remove('show');
|
||||
skipQId = null;
|
||||
}
|
||||
|
||||
// 点击遮罩关闭
|
||||
document.getElementById('skipMask').addEventListener('click',function(e){
|
||||
if(e.target===this) closeSkipModal();
|
||||
});
|
||||
|
||||
renderAll();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,710 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康监测 - 问卷管理 | 健康CQ原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;background:#fff;padding:16px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
/* 多选下拉 */
|
||||
.multi-select{position:relative;display:inline-block;min-width:200px;}
|
||||
.multi-select__trigger{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 32px 4px 8px;font-size:var(--font-sm);background:#fff;cursor:pointer;display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:36px;user-select:none;position:relative;}
|
||||
.multi-select__trigger::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top:5px solid #999;pointer-events:none;}
|
||||
.multi-select__trigger.placeholder{padding:0 32px 0 12px;color:var(--text-placeholder);align-items:center;}
|
||||
.multi-select__trigger .selected-tag{display:inline-flex;align-items:center;gap:2px;background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:var(--radius-sm);font-size:var(--font-xs);line-height:1.6;}
|
||||
.multi-select__trigger .selected-tag .tag-remove{cursor:pointer;font-size:12px;line-height:1;margin-left:2px;}
|
||||
.multi-select__trigger .selected-tag .tag-remove:hover{color:var(--danger);}
|
||||
.multi-select__panel{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:300;display:none;min-width:200px;padding:8px 0;}
|
||||
.multi-select__panel.show{display:block;}
|
||||
.multi-select__option{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:var(--font-sm);cursor:pointer;transition:background .1s;}
|
||||
.multi-select__option:hover{background:#F5F7FA;}
|
||||
.multi-select__option.checked{color:var(--primary);background:var(--primary-light);}
|
||||
.multi-select__checkbox{width:14px;height:14px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
|
||||
.multi-select__checkbox.checked{background:var(--primary);border-color:var(--primary);}
|
||||
.multi-select__checkbox.checked::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px;}
|
||||
/* 工具栏 */
|
||||
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
|
||||
.toolbar .spacer{flex:1;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text-primary);transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.btn-primary:hover{background:#40a9ff;border-color:#40a9ff;color:#fff;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-purple{background:#F9F0FF;color:#722ED1;}
|
||||
.tag-cyan{background:#E6FFFB;color:#13C2C2;}
|
||||
.tag-gray{background:#F5F5F5;color:#666;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;background:none;border:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.link-separator{color:var(--border);margin:0 6px;user-select:none;}
|
||||
/* Switch 开关 */
|
||||
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
|
||||
.switch__track{width:36px;height:20px;border-radius:10px;background:#ccc;transition:background .2s;position:relative;flex-shrink:0;}
|
||||
.switch__track.on{background:var(--success);}
|
||||
.switch__thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:left .2s;}
|
||||
.switch__track.on .switch__thumb{left:18px;}
|
||||
.switch__label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.switch__label.on{color:var(--success);}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 24px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.pagination__pages{display:flex;align-items:center;gap:4px;}
|
||||
.page-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;}
|
||||
.page-item:hover{color:var(--primary);}
|
||||
.page-item.active{background:var(--primary);color:#fff;}
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s;}
|
||||
.modal-mask.show{opacity:1;pointer-events:auto;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:640px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.modal__header h3{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:20px;color:var(--text-secondary);border-radius:var(--radius-sm);}
|
||||
.modal__close:hover{background:#f5f5f5;}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
|
||||
.form-group label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-control{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-control:focus{border-color:var(--primary);}
|
||||
textarea.form-control{height:80px;padding:8px 12px;resize:vertical;}
|
||||
/* 问卷预览弹窗 */
|
||||
.modal-lg{width:860px;}
|
||||
.preview-section{margin-bottom:20px;}
|
||||
.preview-section__title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
|
||||
.preview-question{padding:14px 16px;background:#FAFAFA;border-radius:var(--radius-sm);margin-bottom:8px;}
|
||||
.preview-question__header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
|
||||
.preview-question__q{font-size:var(--font-sm);font-weight:500;flex:1;}
|
||||
.preview-q-type{font-size:var(--font-xs);padding:1px 8px;border-radius:10px;font-weight:400;flex-shrink:0;}
|
||||
.preview-q-type--radio{background:#E6F7FF;color:#1890FF;}
|
||||
.preview-q-type--checkbox{background:#F6FFED;color:#52C41A;}
|
||||
.preview-q-type--text{background:#F9F0FF;color:#722ED1;}
|
||||
.preview-question__opts{display:flex;gap:16px;flex-wrap:wrap;padding-left:4px;}
|
||||
.preview-question__opt{font-size:var(--font-sm);color:var(--text-secondary);display:flex;align-items:center;gap:4px;}
|
||||
.preview-question__jump{font-size:var(--font-xs);color:#AD6800;margin-left:4px;}
|
||||
.preview-question__input{font-size:var(--font-sm);color:var(--text-placeholder);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:6px 12px;background:#fff;flex:1;max-width:320px;}
|
||||
.preview-skip-hint{margin-top:8px;padding:6px 12px;background:#FFFBE6;border:1px solid #FFE58F;border-radius:var(--radius-sm);font-size:var(--font-xs);color:#AD6800;display:flex;align-items:center;gap:4px;margin-left:4px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> 健康监测</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="../archive-personal.html">档案</a>
|
||||
<a href="../crowd-status-employee.html">健康现状</a>
|
||||
<a href="../health-checkup/survey-category.html" class="active">健康排查</a>
|
||||
<a href="../wearable/tool-manage.html">穿戴监测</a>
|
||||
<a href="../environment/indoor-device-list.html">健康环境</a>
|
||||
<a href="../exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
<a href="survey-score.html" class="sidebar-item">积分规则</a>
|
||||
<a href="survey-template.html" class="sidebar-item">模板信息</a>
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item active">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">问卷名称</span>
|
||||
<input class="filter-input" id="filterName" placeholder="请输入问卷名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-item__label">适应人群</span>
|
||||
<div class="multi-select" id="crowdSelect">
|
||||
<div class="multi-select__trigger placeholder" onclick="toggleMultiSelect()">全部</div>
|
||||
<div class="multi-select__panel" id="crowdPanel">
|
||||
<div class="multi-select__option checked" data-val="全部" onclick="toggleOption(this,'全部')">
|
||||
<span class="multi-select__checkbox checked"></span>全部
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="A类" onclick="toggleOption(this,'A类')">
|
||||
<span class="multi-select__checkbox"></span>A类
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="B类" onclick="toggleOption(this,'B类')">
|
||||
<span class="multi-select__checkbox"></span>B类
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="C类" onclick="toggleOption(this,'C类')">
|
||||
<span class="multi-select__checkbox"></span>C类
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="D类" onclick="toggleOption(this,'D类')">
|
||||
<span class="multi-select__checkbox"></span>D类
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="E类" onclick="toggleOption(this,'E类')">
|
||||
<span class="multi-select__checkbox"></span>E类
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="filterTable()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="M10.5 10.5l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn" onclick="resetFilter()">重置</button>
|
||||
</div>
|
||||
<!-- 操作栏 -->
|
||||
<div class="toolbar">
|
||||
<button class="btn btn-primary" onclick="window.location.href='survey-edit.html'">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
新增问卷
|
||||
</button>
|
||||
<button class="btn" onclick="alert('导出列表数据')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v8M4 6l3 3 3-3M2 11h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn" onclick="alert('导出问卷详情')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 1h7l3 3v9H2V1z" stroke="currentColor" stroke-width="1.3"/><path d="M9 1v3h3" stroke="currentColor" stroke-width="1.3"/><path d="M5 7h4M5 9h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M7 5v4M4 7l3-2 3 2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出问卷详情
|
||||
</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="btn" onclick="alert('查看导出任务')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.3"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">问卷列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);" id="totalCount">共 5 条数据</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:40%;">问卷名称</th>
|
||||
<th style="width:20%;">适应人群</th>
|
||||
<th style="width:15%;">问卷状态</th>
|
||||
<th style="width:25%;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbody"></tbody>
|
||||
</table>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span class="pagination__total" id="pageTotal"></span>
|
||||
<div class="pagination__pages">
|
||||
<span class="page-item active">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<div class="modal-mask" id="editModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3 id="editModalTitle">新增问卷</h3>
|
||||
<button class="modal__close" onclick="closeModal('editModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-group">
|
||||
<label>问卷名称 <span style="color:var(--danger)">*</span></label>
|
||||
<input class="form-control" id="editName" placeholder="请输入问卷名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>适应人群 <span style="color:var(--danger)">*</span></label>
|
||||
<div class="multi-select" id="editCrowdSelect">
|
||||
<div class="multi-select__trigger placeholder" onclick="toggleEditMultiSelect()">请选择适应人群</div>
|
||||
<div class="multi-select__panel" id="editCrowdPanel">
|
||||
<div class="multi-select__option" data-val="A类" onclick="toggleEditOption(this,'A类')">
|
||||
<span class="multi-select__checkbox"></span>A类
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="B类" onclick="toggleEditOption(this,'B类')">
|
||||
<span class="multi-select__checkbox"></span>B类
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="C类" onclick="toggleEditOption(this,'C类')">
|
||||
<span class="multi-select__checkbox"></span>C类
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="D类" onclick="toggleEditOption(this,'D类')">
|
||||
<span class="multi-select__checkbox"></span>D类
|
||||
</div>
|
||||
<div class="multi-select__option" data-val="E类" onclick="toggleEditOption(this,'E类')">
|
||||
<span class="multi-select__checkbox"></span>E类
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>问卷描述</label>
|
||||
<textarea class="form-control" id="editDesc" placeholder="请输入问卷描述"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('editModal')">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveSurvey()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 问卷预览弹窗 -->
|
||||
<div class="modal-mask" id="previewModal">
|
||||
<div class="modal modal-lg">
|
||||
<div class="modal__header">
|
||||
<h3 id="previewTitle">问卷预览</h3>
|
||||
<button class="modal__close" onclick="closeModal('previewModal')">×</button>
|
||||
</div>
|
||||
<div class="modal__body" id="previewBody"></div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('previewModal')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(h){h.parentElement.classList.toggle('open');}
|
||||
(function(){var a=document.querySelector('.sidebar-item.active');if(!a)return;var s=a.closest('.sidebar-subgroup');if(s)s.classList.add('open');})();
|
||||
|
||||
/* ===== 多选下拉(筛选栏) ===== */
|
||||
var filterCrowds = []; // 空 = 全部
|
||||
|
||||
function toggleMultiSelect(){
|
||||
var panel = document.getElementById('crowdPanel');
|
||||
var isShow = panel.classList.contains('show');
|
||||
closeAllMultiSelects();
|
||||
if(!isShow){panel.classList.add('show');}
|
||||
}
|
||||
|
||||
function toggleOption(el, val){
|
||||
var cb = el.querySelector('.multi-select__checkbox');
|
||||
if(val === '全部'){
|
||||
if(cb.classList.contains('checked')){
|
||||
// 取消全部 → 清空所有
|
||||
filterCrowds = [];
|
||||
document.querySelectorAll('#crowdPanel .multi-select__option').forEach(function(opt){
|
||||
opt.classList.remove('checked');
|
||||
opt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
});
|
||||
el.classList.add('checked');
|
||||
cb.classList.add('checked');
|
||||
} else {
|
||||
// 选中全部 → 只选全部
|
||||
filterCrowds = [];
|
||||
document.querySelectorAll('#crowdPanel .multi-select__option').forEach(function(opt){
|
||||
opt.classList.remove('checked');
|
||||
opt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
});
|
||||
el.classList.add('checked');
|
||||
cb.classList.add('checked');
|
||||
}
|
||||
} else {
|
||||
// 取消"全部"
|
||||
var allOpt = document.querySelector('#crowdPanel .multi-select__option[data-val="全部"]');
|
||||
allOpt.classList.remove('checked');
|
||||
allOpt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
|
||||
if(cb.classList.contains('checked')){
|
||||
el.classList.remove('checked');
|
||||
cb.classList.remove('checked');
|
||||
filterCrowds = filterCrowds.filter(function(c){return c !== val;});
|
||||
} else {
|
||||
el.classList.add('checked');
|
||||
cb.classList.add('checked');
|
||||
filterCrowds.push(val);
|
||||
}
|
||||
// 如果所有具体类别都选中了，自动选中"全部"
|
||||
var allChecked = ['A类','B类','C类','D类','E类'].every(function(c){
|
||||
return filterCrowds.indexOf(c) > -1;
|
||||
});
|
||||
if(allChecked){
|
||||
allOpt.classList.add('checked');
|
||||
allOpt.querySelector('.multi-select__checkbox').classList.add('checked');
|
||||
filterCrowds = [];
|
||||
}
|
||||
}
|
||||
updateFilterTrigger();
|
||||
}
|
||||
|
||||
function updateFilterTrigger(){
|
||||
var trigger = document.querySelector('#crowdSelect .multi-select__trigger');
|
||||
if(filterCrowds.length === 0){
|
||||
trigger.textContent = '全部';
|
||||
trigger.className = 'multi-select__trigger placeholder';
|
||||
} else {
|
||||
trigger.className = 'multi-select__trigger';
|
||||
var html = '';
|
||||
filterCrowds.forEach(function(c){
|
||||
html += '<span class="selected-tag">'+c+'<span class="tag-remove" onclick="removeFilterTag(\''+c+'\')">×</span></span>';
|
||||
});
|
||||
trigger.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
function removeFilterTag(val){
|
||||
filterCrowds = filterCrowds.filter(function(c){return c !== val;});
|
||||
var opt = document.querySelector('#crowdPanel .multi-select__option[data-val="'+val+'"]');
|
||||
opt.classList.remove('checked');
|
||||
opt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
// 取消"全部"
|
||||
var allOpt = document.querySelector('#crowdPanel .multi-select__option[data-val="全部"]');
|
||||
allOpt.classList.remove('checked');
|
||||
allOpt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
updateFilterTrigger();
|
||||
}
|
||||
|
||||
function closeAllMultiSelects(){
|
||||
document.querySelectorAll('.multi-select__panel').forEach(function(p){p.classList.remove('show');});
|
||||
}
|
||||
|
||||
/* ===== 多选下拉(编辑弹窗) ===== */
|
||||
var editCrowds = [];
|
||||
|
||||
function toggleEditMultiSelect(){
|
||||
var panel = document.getElementById('editCrowdPanel');
|
||||
var isShow = panel.classList.contains('show');
|
||||
closeAllMultiSelects();
|
||||
if(!isShow){panel.classList.add('show');}
|
||||
}
|
||||
|
||||
function toggleEditOption(el, val){
|
||||
var cb = el.querySelector('.multi-select__checkbox');
|
||||
if(cb.classList.contains('checked')){
|
||||
el.classList.remove('checked');
|
||||
cb.classList.remove('checked');
|
||||
editCrowds = editCrowds.filter(function(c){return c !== val;});
|
||||
} else {
|
||||
el.classList.add('checked');
|
||||
cb.classList.add('checked');
|
||||
editCrowds.push(val);
|
||||
}
|
||||
updateEditTrigger();
|
||||
}
|
||||
|
||||
function updateEditTrigger(){
|
||||
var trigger = document.querySelector('#editCrowdSelect .multi-select__trigger');
|
||||
if(editCrowds.length === 0){
|
||||
trigger.textContent = '请选择适应人群';
|
||||
trigger.className = 'multi-select__trigger placeholder';
|
||||
} else {
|
||||
trigger.className = 'multi-select__trigger';
|
||||
var html = '';
|
||||
editCrowds.forEach(function(c){
|
||||
html += '<span class="selected-tag">'+c+'<span class="tag-remove" onclick="removeEditTag(\''+c+'\')">×</span></span>';
|
||||
});
|
||||
trigger.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
function removeEditTag(val){
|
||||
editCrowds = editCrowds.filter(function(c){return c !== val;});
|
||||
var opt = document.querySelector('#editCrowdPanel .multi-select__option[data-val="'+val+'"]');
|
||||
opt.classList.remove('checked');
|
||||
opt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
updateEditTrigger();
|
||||
}
|
||||
|
||||
/* ===== 数据 ===== */
|
||||
var tagColors = {'A类':'tag-blue','B类':'tag-green','C类':'tag-orange','D类':'tag-purple','E类':'tag-cyan'};
|
||||
|
||||
var surveys = [
|
||||
{id:1, name:'健康记录问卷', crowds:['A类','B类','C类','D类','E类'], desc:'员工日常健康记录排查问卷', enabled:true, questions:[
|
||||
{q:'今天是否按时吃早餐？', type:'radio', opts:['是','否'], skip:{}},
|
||||
{q:'今天饮水量是否达到1500ml？', type:'radio', opts:['是','否'], skip:{}},
|
||||
{q:'今天是否进行了30分钟以上运动？', type:'radio', opts:['是','否'], skip:{0:5}},
|
||||
{q:'昨晚睡眠时间是否达到7小时？', type:'radio', opts:['是','否'], skip:{}},
|
||||
{q:'今天是否感到焦虑或压力过大？', type:'radio', opts:['是','否'], skip:{}},
|
||||
{q:'请描述您的运动习惯', type:'text', opts:[], skip:{}},
|
||||
{q:'您有哪些运动项目？', type:'checkbox', opts:['跑步','游泳','瑜伽','骑行','球类','健身'], skip:{}}
|
||||
]},
|
||||
{id:2, name:'职业健康排查问卷', crowds:['A类','B类'], desc:'职业健康专项排查问卷', enabled:true, questions:[
|
||||
{q:'今天工作中是否接触有害物质？', type:'radio', opts:['是','否'], skip:{0:3}},
|
||||
{q:'今天是否佩戴了防护用品？', type:'radio', opts:['是','否'], skip:{}},
|
||||
{q:'本周是否参加了安全培训？', type:'radio', opts:['是','否'], skip:{}},
|
||||
{q:'请描述您接触到的有害物质', type:'text', opts:[], skip:{}}
|
||||
]},
|
||||
{id:3, name:'心理健康评估问卷', crowds:['C类','D类'], desc:'员工心理健康定期评估', enabled:true, questions:[
|
||||
{q:'最近一周是否感到情绪低落？', type:'radio', opts:['从未','偶尔','经常','总是'], skip:{}},
|
||||
{q:'最近一周睡眠质量如何？', type:'radio', opts:['良好','一般','较差','很差'], skip:{}},
|
||||
{q:'您平时如何缓解压力？', type:'checkbox', opts:['运动','听音乐','阅读','冥想','聊天','其他'], skip:{}},
|
||||
{q:'是否有足够的社交支持？', type:'radio', opts:['是','否'], skip:{}}
|
||||
]},
|
||||
{id:4, name:'慢病管理随访问卷', crowds:['E类'], desc:'慢性疾病患者定期随访', enabled:true, questions:[
|
||||
{q:'今天是否按时服药？', type:'radio', opts:['是','否'], skip:{0:3,1:4}},
|
||||
{q:'今天是否监测了血压/血糖？', type:'radio', opts:['是','否'], skip:{}},
|
||||
{q:'最近是否有不适症状？', type:'text', opts:[], skip:{}},
|
||||
{q:'最近是否有不适症状？', type:'radio', opts:['无','轻微','明显'], skip:{}},
|
||||
{q:'今天饮食是否控制了盐油糖摄入？', type:'radio', opts:['是','否'], skip:{}}
|
||||
]},
|
||||
{id:5, name:'新员工健康基线问卷', crowds:['A类'], desc:'新入职员工健康基线调查', enabled:true, questions:[
|
||||
{q:'您是否有慢性病史？', type:'radio', opts:['无','高血压','糖尿病','其他'], skip:{0:4,3:5}},
|
||||
{q:'您是否有药物过敏史？', type:'radio', opts:['无','有'], skip:{}},
|
||||
{q:'请描述您的药物过敏情况', type:'text', opts:[], skip:{}},
|
||||
{q:'您最近的运动频率？', type:'radio', opts:['每周3次以上','每周1-2次','很少运动'], skip:{}},
|
||||
{q:'您是否有吸烟习惯？', type:'radio', opts:['不吸烟','已戒烟','偶尔吸烟','经常吸烟'], skip:{}}
|
||||
]}
|
||||
];
|
||||
|
||||
/* ===== 渲染表格 ===== */
|
||||
function renderTable(data){
|
||||
var html = '';
|
||||
data.forEach(function(s){
|
||||
var crowdTags = s.crowds.map(function(c){
|
||||
return '<span class="tag '+tagColors[c]+'">'+c+'</span>';
|
||||
}).join(' ');
|
||||
var trackCls = 'switch__track'+(s.enabled?' on':'');
|
||||
var labelCls = 'switch__label'+(s.enabled?' on':'');
|
||||
var labelTxt = s.enabled?'已开启':'已关闭';
|
||||
html += '<tr>';
|
||||
html += '<td>'+s.name+'</td>';
|
||||
html += '<td>'+crowdTags+'</td>';
|
||||
html += '<td><div class="switch" onclick="toggleSurveyStatus('+s.id+')"><span class="'+trackCls+'"><span class="switch__thumb"></span></span><span class="'+labelCls+'">'+labelTxt+'</span></div></td>';
|
||||
html += '<td>';
|
||||
html += '<button class="link" onclick="openPreview('+s.id+')">问卷预览</button>';
|
||||
html += '<span class="link-separator">|</span>';
|
||||
html += '<button class="link" onclick="window.location.href=\'survey-edit.html\'">编辑</button>';
|
||||
html += '<span class="link-separator">|</span>';
|
||||
html += '<button class="link link-danger" onclick="deleteSurvey('+s.id+')">删除</button>';
|
||||
html += '</td></tr>';
|
||||
});
|
||||
document.getElementById('tbody').innerHTML = html || '<tr><td colspan="4" style="text-align:center;padding:40px;color:var(--text-placeholder);">暂无数据</td></tr>';
|
||||
document.getElementById('totalCount').textContent = '共 '+data.length+' 条数据';
|
||||
document.getElementById('pageTotal').textContent = '共 '+data.length+' 条数据';
|
||||
}
|
||||
|
||||
/* ===== 筛选 ===== */
|
||||
function filterTable(){
|
||||
var name = document.getElementById('filterName').value.trim().toLowerCase();
|
||||
var filtered = surveys.filter(function(s){
|
||||
if(name && s.name.toLowerCase().indexOf(name) === -1) return false;
|
||||
if(filterCrowds.length > 0){
|
||||
var hasOverlap = filterCrowds.some(function(c){return s.crowds.indexOf(c) > -1;});
|
||||
if(!hasOverlap) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
renderTable(filtered);
|
||||
}
|
||||
|
||||
function resetFilter(){
|
||||
document.getElementById('filterName').value = '';
|
||||
filterCrowds = [];
|
||||
// 重置多选UI
|
||||
document.querySelectorAll('#crowdPanel .multi-select__option').forEach(function(opt){
|
||||
opt.classList.remove('checked');
|
||||
opt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
});
|
||||
var allOpt = document.querySelector('#crowdPanel .multi-select__option[data-val="全部"]');
|
||||
allOpt.classList.add('checked');
|
||||
allOpt.querySelector('.multi-select__checkbox').classList.add('checked');
|
||||
updateFilterTrigger();
|
||||
renderTable(surveys);
|
||||
}
|
||||
|
||||
/* ===== 弹窗 ===== */
|
||||
function closeModal(id){
|
||||
document.getElementById(id).classList.remove('show');
|
||||
closeAllMultiSelects();
|
||||
}
|
||||
|
||||
function openEditModal(id){
|
||||
if(id === null){
|
||||
document.getElementById('editModalTitle').textContent = '新增问卷';
|
||||
document.getElementById('editName').value = '';
|
||||
document.getElementById('editDesc').value = '';
|
||||
editCrowds = [];
|
||||
// 重置编辑多选UI
|
||||
document.querySelectorAll('#editCrowdPanel .multi-select__option').forEach(function(opt){
|
||||
opt.classList.remove('checked');
|
||||
opt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
});
|
||||
} else {
|
||||
var s = surveys.find(function(x){return x.id === id;});
|
||||
if(!s) return;
|
||||
document.getElementById('editModalTitle').textContent = '编辑问卷';
|
||||
document.getElementById('editName').value = s.name;
|
||||
document.getElementById('editDesc').value = s.desc || '';
|
||||
editCrowds = s.crowds.slice();
|
||||
// 设置编辑多选UI
|
||||
document.querySelectorAll('#editCrowdPanel .multi-select__option').forEach(function(opt){
|
||||
var val = opt.getAttribute('data-val');
|
||||
if(editCrowds.indexOf(val) > -1){
|
||||
opt.classList.add('checked');
|
||||
opt.querySelector('.multi-select__checkbox').classList.add('checked');
|
||||
} else {
|
||||
opt.classList.remove('checked');
|
||||
opt.querySelector('.multi-select__checkbox').classList.remove('checked');
|
||||
}
|
||||
});
|
||||
}
|
||||
updateEditTrigger();
|
||||
document.getElementById('editModal').classList.add('show');
|
||||
}
|
||||
|
||||
function saveSurvey(){
|
||||
var name = document.getElementById('editName').value.trim();
|
||||
if(!name){alert('请输入问卷名称');return;}
|
||||
if(editCrowds.length === 0){alert('请选择适应人群');return;}
|
||||
closeModal('editModal');
|
||||
}
|
||||
|
||||
function toggleSurveyStatus(id){
|
||||
var s = surveys.find(function(x){return x.id === id;});
|
||||
if(!s) return;
|
||||
s.enabled = !s.enabled;
|
||||
renderTable(surveys);
|
||||
}
|
||||
|
||||
function deleteSurvey(id){
|
||||
var s = surveys.find(function(x){return x.id === id;});
|
||||
if(!s) return;
|
||||
if(confirm('确定要删除问卷「'+s.name+'」吗？')){
|
||||
surveys = surveys.filter(function(x){return x.id !== id;});
|
||||
filterTable();
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 问卷预览 ===== */
|
||||
function openPreview(id){
|
||||
var s = surveys.find(function(x){return x.id === id;});
|
||||
if(!s) return;
|
||||
document.getElementById('previewTitle').textContent = '问卷预览 - '+s.name;
|
||||
var crowdTags = s.crowds.map(function(c){
|
||||
return '<span class="tag '+tagColors[c]+'">'+c+'</span>';
|
||||
}).join(' ');
|
||||
var html = '<div class="preview-section">';
|
||||
html += '<div class="preview-section__title">基本信息</div>';
|
||||
html += '<div style="margin-bottom:12px;"><span style="color:var(--text-secondary);font-size:var(--font-sm);">适应人群：</span>'+crowdTags+'</div>';
|
||||
if(s.desc){
|
||||
html += '<div style="margin-bottom:12px;"><span style="color:var(--text-secondary);font-size:var(--font-sm);">问卷描述：</span><span style="font-size:var(--font-sm);">'+s.desc+'</span></div>';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="preview-section">';
|
||||
html += '<div class="preview-section__title">问卷题目（共 '+s.questions.length+' 题）</div>';
|
||||
|
||||
s.questions.forEach(function(q,i){
|
||||
var typeLabel = q.type==='radio'?'单选题':q.type==='checkbox'?'多选题':'填空题';
|
||||
var typeCls = q.type==='radio'?'preview-q-type--radio':q.type==='checkbox'?'preview-q-type--checkbox':'preview-q-type--text';
|
||||
html += '<div class="preview-question">';
|
||||
html += '<div class="preview-question__header">';
|
||||
html += '<span class="preview-question__q">'+(i+1)+'. '+q.q+'</span>';
|
||||
html += '<span class="preview-q-type '+typeCls+'">'+typeLabel+'</span>';
|
||||
html += '</div>';
|
||||
|
||||
if(q.type==='text'){
|
||||
html += '<div class="preview-question__input">填写提示：请输入您的回答...</div>';
|
||||
} else {
|
||||
html += '<div class="preview-question__opts">';
|
||||
var iconHtml = q.type==='radio'
|
||||
? '<span style="width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;display:inline-block;"></span>'
|
||||
: '<span style="width:14px;height:14px;border-radius:3px;border:1.5px solid var(--border);flex-shrink:0;display:inline-block;"></span>';
|
||||
q.opts.forEach(function(o,oi){
|
||||
html += '<span class="preview-question__opt">';
|
||||
html += iconHtml;
|
||||
html += esc(o);
|
||||
// 跳题逻辑
|
||||
if(q.type==='radio' && q.skip && q.skip[oi]!==undefined){
|
||||
var targetIdx = q.skip[oi];
|
||||
var targetQ = s.questions[targetIdx-1];
|
||||
if(targetQ){
|
||||
html += '<span class="preview-question__jump">（跳转至 - 第'+targetIdx+'题 '+esc(targetQ.q)+'）</span>';
|
||||
}
|
||||
}
|
||||
html += '</span>';
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// 跳题提示
|
||||
if(q.type==='radio' && q.skip && Object.keys(q.skip).length>0){
|
||||
html += '<div class="preview-skip-hint"><svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M8 2L3 7l5 5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 7h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>此题设置了跳题逻辑</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
document.getElementById('previewBody').innerHTML = html;
|
||||
document.getElementById('previewModal').classList.add('show');
|
||||
}
|
||||
|
||||
function esc(s){return (s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
/* ===== 初始化 ===== */
|
||||
renderTable(surveys);
|
||||
|
||||
/* 点击外部关闭下拉 */
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('.multi-select')) closeAllMultiSelects();
|
||||
});
|
||||
/* 点击遮罩关闭弹窗 */
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){
|
||||
m.addEventListener('click',function(e){if(e.target === m) closeModal(m.id);});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -120,7 +120,7 @@
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
@@ -129,14 +129,17 @@
|
||||
<a href="survey-question.html" class="sidebar-item active">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
@@ -87,14 +87,17 @@
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="score-wrap">
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康排查</div>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查问卷</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="survey-category.html" class="sidebar-item">问题分类</a>
|
||||
@@ -135,14 +135,17 @@
|
||||
<a href="survey-question.html" class="sidebar-item">问题管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="maxim.html" class="sidebar-item">格言管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<a href="maxim.html" class="sidebar-item" style="display:none">格言管理</a>
|
||||
<div class="sidebar-subgroup" style="display:none">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke-width="1.5" stroke-linecap="round"/></svg> 排查记录</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="record-user.html" class="sidebar-item">员工排查统计</a>
|
||||
<a href="record-dept.html" class="sidebar-item">单位排查统计</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="survey-manage.html" class="sidebar-item">问卷管理</a>
|
||||
<a href="activity-manage.html" class="sidebar-item">活动管理</a>
|
||||
<a href="activity-stat.html" class="sidebar-item">活动统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="table-card">
|
||||
|
||||
Reference in New Issue
Block a user