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

src/views/Student/components/choiceQuestionDetailDialog.vue

@@ -239,6 +239,7 @@
       </div>
     </div>
     <previewImageTool ref="previewImageToolRef" />
+    <selectUserDialog ref="selectUserDialogRef" />
   </div>
 </template>
 
@@ -249,6 +250,7 @@ import previewImageTool from '../../components/tool/previewImageTool.vue'
 import MarkdownIt from 'markdown-it'
 import useImport from '@/hooks/useImport'
 import { lang } from '@/main'
+import selectUserDialog from './selectUserDialog.vue'
 const props = defineProps<{
   visible: number[];
   workIndex: number;
@@ -278,6 +280,8 @@ const workDetail = computed(() => {
 
 // 预览图片组件
 const previewImageToolRef = ref<any>(null)
+// 选择用户组件
+const selectUserDialogRef = ref<any>(null)
 
 const md = new MarkdownIt()
 const { getFile } = useImport()
@@ -597,6 +601,7 @@ const setEchartsArea1 = () => {
         },
       ],
     }
+
     _work.choiceUser.forEach((i: any, idx: number) => {
       // 如果是图片，存src对象，否则为字符串
       if (
@@ -637,6 +642,16 @@ const setEchartsArea1 = () => {
     //   ]
     // }
     myChart.value.setOption(option)
+
+    myChart.value.off('click')
+    myChart.value.on('click', (params: any) => {
+      const idx = params.dataIndex
+      const selectedOption = _work.choiceUser[idx]
+      if (selectedOption && selectUserDialogRef.value) {
+        // console.log(selectedOption)
+        selectUserDialogRef.value.open(selectedOption)
+      }
+    })
   }
 }
 

src/views/Student/components/selectUserDialog.vue

@@ -0,0 +1,96 @@
+<template>
+   <Modal :visible="show" :class="'modalArea'" style="padding: 0;background: none;" :width="400" :closeButton="false" :closeOnClickMask="true" @closed="close()">
+    <div class="header">
+      <div class="title">选择<span>{{ data.index }}</span>的成员</div>
+      <div class="close" @click="close()"><svg  viewBox="0 0 1024 1024" width="200" height="200"><path d="M999.819275 905.894092c26.805506 27.003004 26.78811 70.77902-0.051166 97.756441-13.398148 13.484106-30.970362 20.234857-48.534389 20.234857-17.58961 0-35.171034-6.758937-48.577369-20.277836L511.657192 609.698113 120.30704 1003.263723c-13.407358 13.475919-30.970362 20.217461-48.53439 20.217461-17.58961 0-35.17922-6.758937-48.585555-20.269649-26.813692-27.003004-26.78811-70.77902 0.042979-97.764628l391.33378-393.557424L23.572882 117.989251c-26.813692-27.012214-26.796296-70.780043 0.034792-97.764627 26.839275-26.985608 70.332858-26.960025 97.137341 0.042979l390.989949 393.909441L903.07693 20.61962c26.831089-26.977421 70.315462-26.960025 97.129154 0.042979 26.813692 27.01119 26.78811 70.770833-0.042979 97.764627L608.812953 511.98465l391.006322 393.909442z"></path></svg></div>
+    </div>
+    <div class="content">
+      <div v-for="(item, index) in data.user" :key="index">
+        {{ item }}
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Modal from '@/components/Modal.vue'
+const show = ref(false)
+const data = ref({})
+
+// 打开
+const open = (value) => {
+  init()
+  show.value = true
+  data.value = JSON.parse(JSON.stringify(value))
+}
+
+// 关闭
+const close = () => {
+  show.value = false
+  init()
+}
+
+const init = () => {
+  data.value = {}
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<style lang="scss">
+.modalArea{
+  &>.modal-content {
+    border-radius: 1rem;
+    box-shadow: 0 0 10px #FDF6DE;
+    padding: 0;
+    border: solid 1px #FDF6DE;
+  }
+}
+
+.header{
+  padding: 1.2rem 1.5rem;
+  border-bottom: solid 1px #FDF6DE;
+  font-weight: bold;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &>.title{
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+  }
+  &>.close{
+    cursor: pointer;
+    padding: .6rem;
+    border-radius: 2rem;
+    border: solid 1px #FCEFC8;
+    width: fit-content;
+    height: fit-content;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &>svg{
+      width: .7rem;
+      height: .7rem;
+    }
+  }
+}
+
+.content{
+  padding: 1rem;
+  display: flex;
+  gap: .8rem;
+  flex-wrap: wrap;
+  &>div{
+    padding: .25rem .5rem;
+    font-weight: 500;
+    font-size: 1rem;
+  }
+}
+</style>