挑人 加入 轉盤UI 組件

HiTeachCC/ClientApp/src/components/Tools/turnTable.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="turn-table">
+    <div class="container">
+      <section class="turntable">
+        <div class="list" id="list">
+          <ul :style="{ transform: `rotate(${this.rotatedeg}deg)` }" :class="{ go: isRotating }">
+            <li v-for="item in prize_list" :key="item.index">
+              <p>{{ item.name }}</p>
+              <p>{{ item.sort }}</p>
+            </li>
+          </ul>
+        </div>
+        <button class="turntable_btn" type="button" @click="pickOne()">pick</button>
+        <svg viewBox="-50 -50 100 100">
+          <g class="polyline" :style="{ transform: `rotate(${this.rotatedeg}deg)` }" :class="{ go: isRotating }">
+            <polyline points="-16,-38 16,-38 0,0"></polyline>
+            <polyline points="16,-38 38,-16 0,0"></polyline>
+            <polyline points="38,-16 38,16 0,0"></polyline>
+            <polyline points="0,0 38,16 16,38"></polyline>
+            <polyline points="0,0 16,38 -16,38"></polyline>
+            <polyline points="0,0 -16,38 -38,16"></polyline>
+            <polyline points="-38,-16 -38,16 0,0"></polyline>
+            <polyline points="-16,-38 -38,-16 0,0"></polyline>
+          </g>
+          <circle cx="0" cy="0" r="40" :class="{ go: isRotating }"></circle>
+
+          <g class="mark">
+            <circle cx="0" cy="-43" r="4"></circle>
+            <polyline points="-3.5,-41 3.5,-41 0,-35"></polyline>
+            <circle class="round" cx="0" cy="-43" r="1.5"></circle>
+          </g>
+        </svg>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TurnTable',
+  data() {
+    return {
+      prize_list: [
+        {
+          name: '',
+          sort: 1
+        },
+        {
+          name: '',
+          sort: 2
+        },
+        {
+          name: '',
+          sort: 3
+        },
+        {
+          name: '',
+          sort: 4
+        },
+        {
+          name: '',
+          sort: 5
+        },
+        {
+          name: '',
+          sort: 6
+        },
+        {
+          name: '',
+          sort: 7
+        },
+        {
+          name: '',
+          sort: 8
+        }
+      ],
+
+      nameList: this.$store.state.students,
+      iEnd: -1,
+      targetPrizeElement: '',
+      rotatedeg: 0,
+      isRotating: false
+    }
+  },
+  mounted() {},
+  methods: {
+    randomPrizelist() {
+      if (this.nameList.length == 0) {
+        this.$Message.warning('暂无成员参与挑人。')
+      }
+        else{
+             this.prize_list.forEach(element => {
+        let ramdomIndex = Math.floor(Math.random() * this.nameList.length)
+        element.sort = this.nameList[ramdomIndex].sort
+        element.name = this.nameList[ramdomIndex].studentName
+      })
+        }
+     
+     
+    },
+    async pickOne() {
+      await this.randomPrizelist()
+      if (this.isRotating == false) {
+        this.iEnd = Math.floor(Math.random() * 8)
+        this.isRotating = true
+        setTimeout(() => {
+          this.isRotating = false
+          alert('選中' + this.prize_list[this.iEnd].sort + '' + this.prize_list[this.iEnd].name)
+        }, 4000)
+        // console.log(this.iEnd);
+        // let prizes = document.getElementById("list").getElementsByTagName('p')
+        // for(let i=0; i<prizes.length;i++){
+        //     if(parseInt(prizes[i].innerText)==this.iEnd){
+        //         console.log(prizes[i])
+        //     }
+        // }
+        this.rotatedeg = this.iEnd * 45
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@charset "UTF-8";
+@keyframes shiny {
+  0% {
+    fill: white;
+  }
+  50% {
+    fill: #ffc242;
+  }
+  100% {
+    fill: white;
+  }
+}
+@keyframes go {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+* {
+  padding: 0;
+  margin: 0;
+  font-family: '微軟正黑體';
+}
+
+body {
+  background-color: #3dbfbb;
+}
+
+.container {
+  max-width: 1000px;
+  min-width: 400px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+header {
+  text-align: center;
+  padding: 50px;
+}
+
+section.turntable {
+  position: relative;
+  min-width: 500px;
+  min-height: 500px;
+  button.turntable_btn {
+    cursor: default;
+    opacity: 1;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: none;
+    border: none;
+    outline: none;
+    font-weight: 900;
+    width: 30%;
+    height: 30%;
+    border-radius: 50%;
+    font-size: 40px;
+    color: #0080c0;
+    background-color: #ffb929;
+    cursor: pointer;
+    &::after {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+      width: 80%;
+      height: 80%;
+      border-radius: 50%;
+      background-color: #ffe3a8;
+      z-index: -1;
+      box-shadow: 1px 2px 4px #754f00;
+    }
+    &:active::after {
+      box-shadow: none;
+      margin-top: 2px;
+      background-color: #ffda8f;
+      opacity: 1;
+    }
+  }
+  .list {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    width: 70%;
+    height: 70%;
+    text-align: center;
+    ul {
+      list-style: none;
+      width: 100%;
+      height: 100%;
+      transform: rotate(0deg);
+      li {
+        color: #fff;
+        font-size: 24px;
+        line-height: 40px;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .go {
+      animation: go 0.8s linear 4;
+      -webkit-animation: go 0.8s linear 4;
+    }
+  }
+  svg > circle {
+    fill: none;
+    stroke: blue;
+    stroke-width: 4px;
+  }
+  svg g.polyline.go {
+    animation: go 0.8s linear 4;
+    -webkit-animation: go 0.8s linear 4;
+  }
+  svg g.polyline polyline {
+    fill: #0056f5;
+  }
+  svg g.polyline polyline:nth-child(odd) {
+    fill: rgb(65, 130, 252);
+  }
+  svg g.circle circle {
+    fill: #fff;
+    stroke: none;
+    box-shadow: 0px 2px 5px #ccc;
+  }
+  svg g.circle circle:nth-child(odd) {
+    animation: shiny 0.8s linear infinite;
+    -webkit-animation: shiny 0.8s linear infinite;
+  }
+  svg g.circle circle:nth-child(odd).go {
+    animation: go 0.8s linear 4, shiny 0.8s linear infinite;
+    -webkit-animation: go 0.8s linear 4, shiny 0.8s linear infinite;
+  }
+  svg g.circle circle:nth-child(even) {
+    animation: shiny 0.8s 0.5s linear infinite;
+    -webkit-animation: shiny 0.8s 0.5s linear infinite;
+  }
+  svg g.circle circle:nth-child(even).go {
+    animation: go 0.8s 0.8s linear 4, shiny 0.8s 0.5s linear infinite;
+    -webkit-animation: go 0.8s linear 4, shiny 0.8s 0.5s linear infinite;
+  }
+  svg g.mark circle {
+    fill: #ffb10f;
+  }
+  svg g.mark circle.round {
+    fill: none;
+    stroke: #ffebc2;
+  }
+  svg g.mark polyline {
+    fill: #ffb10f;
+    stroke: none;
+  }
+}
+
+.list ul li:nth-child(2) {
+  transform: rotate(315deg);
+}
+.list ul li:nth-child(3) {
+  transform: rotate(270deg);
+}
+.list ul li:nth-child(4) {
+  transform: rotate(225deg);
+}
+.list ul li:nth-child(5) {
+  transform: rotate(180deg);
+}
+.list ul li:nth-child(6) {
+  transform: rotate(135deg);
+}
+.list ul li:nth-child(7) {
+  transform: rotate(90deg);
+}
+.list ul li:nth-child(8) {
+  transform: rotate(45deg);
+}
+</style>

HiTeachCC/ClientApp/src/views/Board.vue

@@ -12,7 +12,7 @@
         <img class="teachimg" :src="teachImg" />
         <p class="teachname">{{ teachname }}</p>
       </div>
-      <div class="total-studentnum" @click='isShowStudentList=true'><svg-icon icon-class="students" class="students-icon" />{{ students.length }}</div>
+      <div class="total-studentnum" @click="isShowStudentList = true"><svg-icon icon-class="students" class="students-icon" />{{ students.length }}</div>
       <div class="percentage-studentanswer" @click="popuphd()">
         <q-circular-progress show-value font-size="8px" :value="StudentPercentage" size="45px" :thickness="0.22" color="teal" track-color="grey-3" class="q-ma-md"> {{ StudentPercentage }}% </q-circular-progress>
       </div>
@@ -70,9 +70,9 @@
       </div>
     </div>
     <!--挑人-->
-    <div class="drag-wrap" v-drag v-if="toolIndexList.indexOf(1) > -1">
-      <Icon type="md-close-circle" class="tool-icon-close" @click="handleCloseTool(1)" />
-      <BasePick></BasePick>
+    <div  class="drag-wrap picker-drag" v-drag v-if="toolIndexList.indexOf(1) > -1">
+      <div class="tool-icon-close" @click="handleCloseTool(1)"><svg-icon icon-class="Close" class="close-icon" /></div>
+      <TurnTable />
     </div>
     <!--定时器-->
     <div class="drag-wrap timer-drag" v-drag v-if="toolIndexList.indexOf(2) > -1" @mousedown="stickDown($event)" @touchmove="stickDown($event)">
@@ -183,22 +183,21 @@
     </div>
     <!--作品收集end-->
     <!--學生名單彈窗-->
-    <div class='student-List' v-show='isShowStudentList == true'>
-        <h5>目前加入教室的學生名單</h5>  
-        <div class="student-group">
-        <div v-for="item in students" :key="item.id" class='student-card'>
-           <div class="student-leftimg">
-              <div class="student-idnumber">{{item.sort}}</div>
-              <div class="student-portrait"><img :src="item.headImg" /></div>
-             
-           </div>
-           <div class="student-rightname">{{item.studentName}}</div>  
-        </div> 
-        </div>
-        <div class="noData" v-show="students.length == 0">
-          <p>暂无数据</p>
+    <div class="student-List" v-show="isShowStudentList == true">
+      <h5>目前加入教室的學生名單</h5>
+      <div class="student-group">
+        <div v-for="item in students" :key="item.id" class="student-card">
+          <div class="student-leftimg">
+            <div class="student-idnumber">{{ item.sort }}</div>
+            <div class="student-portrait"><img :src="item.headImg" /></div>
+          </div>
+          <div class="student-rightname">{{ item.studentName }}</div>
         </div>
-         <div class="close-btn" @click="isShowStudentList = false"> <svg-icon icon-class="Close" class="close-icon" /></div>
+      </div>
+      <div class="noData" v-show="students.length == 0">
+        <p>暂无数据</p>
+      </div>
+      <div class="close-btn" @click="isShowStudentList = false"><svg-icon icon-class="Close" class="close-icon" /></div>
     </div>
   </div>
 </template>
@@ -216,6 +215,7 @@ import Pop from '../components/ColorPop/ColorPicker.vue'
 import shapes from '../components/ColorPop/Shapes.vue'
 import BaseTimer from '../components/Tools/BaseTimer.vue'
 import BasePick from '../components/Tools/BasePick.vue'
+import TurnTable from '../components/Tools/TurnTable'
 import PDFJS from 'pdfjs-dist'
 import RenderContent from '../assets/test/test.json'
 import { drawRect, drawArc, drawEllipse, drawImage, drawPath, drawLine, drawTable, drawEchart, drawMath } from '../plugin/PublicRenderer.js'
@@ -240,7 +240,8 @@ export default {
     Pop,
     shapes,
     BaseTimer,
-    BasePick
+    BasePick,
+    TurnTable
   },
   data() {
     return {
@@ -412,7 +413,7 @@ export default {
 
       //停止收集的icon和文字
       workinfo: { icon: 'stop', text: '停止收集' },
-      isShowStudentList:false
+      isShowStudentList: false
     }
   },
   methods: {
@@ -455,8 +456,10 @@ export default {
       localStorage.removeItem('fileType')
       localStorage.removeItem('slide')
     },
-    studentList(){
-      this.$store.state.students.forEach(item=>{console.log(item.studentName)})
+    studentList() {
+      this.$store.state.students.forEach(item => {
+        console.log(item.studentName)
+      })
     },
     handleUploadSuc(response, file, i) {
       //this.beginPdfshowLoading()
@@ -3050,9 +3053,9 @@ export default {
       localStorage.setItem('stageInfo', JSON.stringify(this.saveArr))
       this.$store.state.oldSlide = 1
       this.$store.state.carouselSlide = 1
-      this.$store.state.imgArrOld.splice(1, this.$store.state.imgArr.length-1)
-      this.$store.state.imgArr.splice(1, this.$store.state.imgArr.length-1)
-      this.$store.state.imgArr.idArr.splice(1, this.$store.state.imgArr.length-1)
+      this.$store.state.imgArrOld.splice(1, this.$store.state.imgArr.length - 1)
+      this.$store.state.imgArr.splice(1, this.$store.state.imgArr.length - 1)
+      this.$store.state.imgArr.idArr.splice(1, this.$store.state.imgArr.length - 1)
       this.$store.state.imgArr.splice(0, 1, this.whiteBG)
       this.$store.state.imgArrOld.splice(0, 1, this.whiteBG)
       console.log(this.$store.state.imgArr)
@@ -4146,7 +4149,16 @@ li {
     }
   }
 }
-
+.picker-drag{
+    background: transparent !important;
+    border:none !important;
+    box-shadow:none !important;
+    .tool-icon-close {
+    right: 120px !important;
+    top:120px !important;
+   
+  }
+}
 .drag-wrap {
   position: relative;
   border: 1px solid #ccc;
@@ -4158,24 +4170,22 @@ li {
   padding: 30px 50px;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
-}
-
-.drag-wrap:hover {
-  cursor: move;
-}
-
-.drag-wrap .tool-icon-close {
-  position: absolute;
-  right: -16px;
-  top: -16px;
-  font-size: 32px;
-  z-index: 999;
-  color: #9e9e9e;
-  cursor: pointer;
-}
-
-.drag-wrap .tool-icon-close:hover {
-  font-size: 36px;
+  &:hover {
+    cursor: move;
+  }
+  .tool-icon-close {
+    position: absolute;
+    right: -16px;
+    top: -16px;
+    font-size: 20px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    text-align: center;
+    z-index: 999;
+    background: #d8d8d8;
+    cursor: pointer;
+  }
 }
 
 .timer-drag {