Merge branch 'master' of https://git.cocorobo.cn/jack/PPT

src/views/Student/components/ChoiceStatistics.vue

@@ -18,6 +18,9 @@
 							<span>{{ index+1 }}、</span>
 							<div>{{ item.title }}</div>
 						</div>
+            <div class="t45_btn">
+              <span @click="lookStudent(item.checkList)">查看学生</span>
+            </div>
 						<div class="t45_list">
 							<div class="t45_l_item" v-for="(i,index2) in item.checkList" :key="index+'_'+index2">
 								<div class="t45_l_i_option">
@@ -27,7 +30,7 @@
 									</div>
 									<span>{{ i.proportion }}</span>
 								</div>
-								<div class="t45_l_i_user">
+								<!-- <div class="t45_l_i_user">
 									<template v-for="(j,index3) in i.user" :key="index+'_'+index2+'_'+index3">
 										<div  v-if="item.showAllUser || (!item.showAllUser && index3 < 3)">
 											<span>{{ j }}</span>
@@ -39,18 +42,31 @@
 									<span class="t45_o_btn" v-if="i.user.length > 3 && item.showAllUser" @click="()=>{item.showAllUser = false,$forceUpdate()}">
 										<svg style="transform: rotate(180deg);" t="1756278651830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7545" width="200" height="200"><path d="M293.546667 253.013333l264.533333 266.666667-264.106667 266.24 70.4 70.826667 334.506667-337.066667-334.933333-337.066667z" p-id="7546"></path></svg>
 									</span>
-								</div>
+								</div> -->
 							</div>
 						</div>
 					</div>
 				</div>
       </div>
   </div>
+
+  <Modal :visible="visible" :width="720" :closeButton="true" @update:visible="visible = false">
+    <div class="userBox">
+			<div class="ub_item" v-for="(item,index) in userCheckList" :key="index">
+				<div class="ub_i_options">{{ item.options }}</div>
+        <div class="ub_i_user">
+          <span>选择同学:</span>
+          <div class="ub_i_u_item" v-for="(item2,index2) in item.user" :key="index+'_'+index2">{{ item2 }}</div>
+        </div>
+			</div>
+		</div>
+  </Modal>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { ElementTypes } from '@/types/slides'
+import Modal from '@/components/Modal.vue'
 
 interface Props {
   workArray: any[]
@@ -59,6 +75,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const visible = ref<boolean>(false)
+
+let userCheckList = reactive<any[]>([])
+
 // 检查当前是否为选择题（toolType为45）
 const isChoiceQuestion = computed(() => {
   const frame = props.elementList.find(element => element.type === ElementTypes.FRAME)
@@ -67,7 +87,11 @@ const isChoiceQuestion = computed(() => {
 
 const optionList: Array<string> = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
 
+const lookStudent = (checkList:any) => {
+  userCheckList = checkList
+  visible.value = true
 
+}
 
 // 选择题统计信息
 const statistics = computed(() => {
@@ -243,22 +267,35 @@ const statistics = computed(() => {
 		border: 1px solid #e9ecef;
 		box-sizing: border-box;
 		padding: 16px;
+    position: relative;
 		.t45_title{
 			width: 100%;
 			display: flex;
-			align-items: center;
+			// align-items: center;
+      margin-top: 5px;
 			margin-bottom: 5px;
 			span{
 				font-size: 16px;
 				color: #1890ff;
 			}
 		}
+
+    .t45_btn{
+      position: absolute;
+      right: 5px;
+      top: 3px;
+      
+      span{
+        font-size: 12px;
+        cursor: pointer;
+        color: #409EFF;
+      }
+    }
 	}
 	.t45_list{
 		width: 100%;
 		height: auto;
 		.t45_l_item{
-			
 			margin-top: 5px;
 			.t45_l_i_option{
 				display: flex;
@@ -334,4 +371,37 @@ const statistics = computed(() => {
 		}
 	}
 }
+
+.userBox{
+  width: 100%;
+  height: auto;
+  .ub_item{
+    width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+    border-bottom: solid 1px #D8D8D8;
+    .ub_i_options{
+      font-size: 20px;
+    }
+    .ub_i_user{
+      display: flex;
+      margin: 10px 0;
+      align-items: center;
+      flex-wrap: wrap;
+      &>span{
+        color: #ADADAD;
+      }
+      .ub_i_u_item{
+        padding: 5px 10px;
+        border: solid 1px #0061FF;
+        border-radius: 4px;
+        background-color: #fff;
+        margin-left: 10px;
+        margin-top: 10px;
+        color: #0061FF;
+      }
+    }
+  }
+
+}
 </style>