調整 IRS UI 顯示

- 當顯示圖表時就無法重設答案, 重新作答,僅提供回到翻牌檢視
- 學生卡牌樣式調整

HiTeachCC/ClientApp/src/assets/css/OptionView.less

@@ -32,7 +32,7 @@
 .headerTollBox {
   width: 100%;
   padding: 10px 0px 0px 0px;
-  .title{
+  .title {
     font-size: 20px;
     font-weight: bold;
     display: inline-block;
@@ -49,8 +49,7 @@ button {
 .unanswered-btn {
   color: #fff;
   width: 31%;
-  height: 38px;
-  line-height: 38px;
+
   text-align: center;
   background-color: #ddd;
   font-size: 1.1rem;
@@ -61,8 +60,7 @@ button {
 .result-unanswered-btn {
   color: #fff;
   width: 24%;
-  height: 38px;
-  line-height: 38px;
+
   text-align: center;
   background-color: #ddd;
   font-size: 1rem;
@@ -130,8 +128,7 @@ button {
 .unanswered-clickbtn {
   color: #000;
   width: 100%;
-  height: 38px;
-  line-height: 38px;
+
   text-align: center;
   background-color: #fff;
   font-size: 18px;
@@ -141,8 +138,7 @@ button {
 .answerbtn {
   color: #fff;
   width: 31%;
-  height: 38px;
-  line-height: 38px;
+
   text-align: center;
   background-color: #ddd;
   //font-size: 1.1rem;
@@ -153,8 +149,6 @@ button {
 .allstudents {
   color: #fff;
   width: 37%;
-  height: 38px;
-  line-height: 38px;
   text-align: center;
   background-color: #ddd;
   //font-size: 1rem;
@@ -165,8 +159,7 @@ button {
 .result-allstudents {
   color: #fff;
   width: 28%;
-  height: 38px;
-  line-height: 38px;
+
   text-align: center;
   background-color: #ddd;
   //font-size: 0.95rem;
@@ -174,30 +167,25 @@ button {
   float: left;
 }
 
-
 .answerclickbtn {
   color: #000;
   width: 100%;
-  height: 38px;
-  line-height: 38px;
   text-align: center;
   background-color: #fff;
   font-size: 18px;
   border-radius: 8px;
   margin-left: 4%;
 }
-.control-btngroup{
+.control-btngroup {
   display: block;
   width: 100%;
   position: absolute;
   left: 40%;
   z-index: 999;
-
- 
 }
 .listicon {
   cursor: pointer;
-  width:36px;
+  width: 36px;
   height: 36px;
   line-height: 36px;
   background-color: #d8d8d8;
@@ -206,35 +194,33 @@ button {
   float: left;
   font-size: 22px !important;
   margin-left: 10px !important;
-  img{
+  img {
     width: 22px;
     position: relative;
-    top:3px;
+    top: 3px;
   }
 }
 
-.righticon-group{
+.righticon-group {
   position: absolute;
   right: 10px;
   z-index: 999;
-
 }
 .rightlisticon {
   display: inline-block;
   cursor: pointer;
-  margin-right:10px;
+  margin-right: 10px;
   width: 36px;
   height: 36px;
   line-height: 42px;
   background-color: #d8d8d8;
   text-align: center;
   border-radius: 50%;
-  * { 
+  * {
     font-size: 22px;
   }
 }
 
-
 .rightlisticon svg {
   font-size: 22px;
 }
@@ -265,17 +251,15 @@ button {
   top: 27% !important;
 }
 
-
-
 .triggerbox {
   width: 40%;
   display: block;
   position: relative;
-  top:2px;
-  margin-left: 15%;
+  top: 10px;
+  margin-left: 13%;
   margin-right: 130px;
-  max-width: 300px;
-  *{
+  max-width: 250px;
+  * {
     font-size: 14px;
     font-weight: bolder;
   }
@@ -292,22 +276,34 @@ button {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
-  margin-top:40px;
+  margin-top: 40px;
   /*margin-top: 1%;*/
 }
-.ans-show-stuno{
+.ans-show-stuno {
   position: absolute;
   display: inline-block;
   left: 10% !important;
   top: 7%;
-  width:20px;
-  height:20px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   font-size: 16px;
   line-height: 19px !important;
-  border:1px solid white;
+  border: 1px solid white;
 }
-.answer-default-show{
+.ans-hide-star{
+  position: absolute;
+  display: inline-block;
+  left: 10% !important;
+  top: 7%;
+  width: 20px;
+  height: 20px;
+  
+  font-size: 16px;
+  line-height: 19px !important;
+  
+}
+.answer-default-show {
   text-align: center;
 }
 /*.ivu-row {
@@ -317,7 +313,7 @@ button {
 .vice-studyshowcard {
   width: 100%;
   margin: 0 auto;
-  margin-top:20px;
+  margin-top: 50px;
   overflow-y: scroll;
 }
 
@@ -344,8 +340,10 @@ button {
   width: 30px;
   height: 30px;
   font-size: 20px;
+ 
   display: block;
   line-height: 30px;
+  
 }
 
 .statement-icon {
@@ -399,6 +397,18 @@ button {
   margin-top: 15px;
   /*margin-left: 70px;
     margin-top: 30px;*/
+    .ans-show-stuno {
+      position: absolute;
+      display: inline-block;
+      left: 10% !important;
+      top: 7%;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      font-size: 16px;
+      line-height: 19px !important;
+      border: 1px solid white;
+    }
 }
 
 .answercorrect {
@@ -419,8 +429,7 @@ button {
 .result-answer-error {
   /*width: 100px;*/
   width: 24%;
-  height: 38px;
-  line-height: 38px;
+
   background-color: #ddd;
   text-align: center;
   font-size: 1rem;
@@ -432,14 +441,13 @@ button {
 
 .result-answercorrect {
   width: 24%;
-  height: 38px;
-  line-height: 38px;
+
   background-color: #ddd;
   text-align: center;
   font-size: 1rem;
   font-weight: bold;
   color: #fff;
-  border-radius: 0px 8px 8px 0px;
+  border-radius: 0px 4px 4px 0px;
   float: left;
 }
 /*秀名牌end*/
@@ -518,7 +526,7 @@ button {
   width: 210px;
   height: 95px;
   float: left;
-  margin-left: 70px;
+  margin-left: 30px;
   background-color: #707070;
   border: 1px solid #707070;
   border-radius: 4px;
@@ -530,7 +538,7 @@ button {
   width: 210px;
   height: 95px;
   float: left;
-  margin-left: 70px;
+  margin-left: 30px;
   background-color: @main-color;
   border: 1px solid @main-color;
   border-radius: 4px;
@@ -542,7 +550,7 @@ button {
   width: 210px;
   height: 95px;
   float: left;
-  margin-left: 70px;
+  margin-left: 30px;
   background-color: #efefef;
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -554,24 +562,24 @@ button {
   width: 210px;
   height: 95px;
   float: left;
-  margin-left: 70px;
+  margin-left: 30px;
   background-color: #6da031;
   border: 1px solid #6da031;
-  border-radius: 15px;
+  border-radius: 4px;
   // box-shadow: 3px 3px 3px #666;
-  margin-top: 1%;
+  margin-top: 30px;
 }
 
 .banrd-error {
   width: 210px;
   height: 95px;
   float: left;
-  margin-left: 70px;
+  margin-left: 30px;
   background-color: #fa2000;
   border: 1px solid #fa2000;
-  border-radius: 15px;
+  border-radius: 4px;
   // box-shadow: 3px 3px 3px #666;
-  margin-top: 1%;
+  margin-top: 30px;
 }
 
 .leftimg {
@@ -786,7 +794,7 @@ button {
 .roller {
   display: inline-block;
   width: 20%;
-  right:13%;
+  right: 13%;
   margin-top: -2px;
   position: fixed;
   max-width: 200px;
@@ -873,7 +881,7 @@ button {
   background-color: #d8d8d8;
   cursor: pointer;
   font-size: 20px !important;
- 
+
   border-radius: 50%;
   text-align: center;
 }

HiTeachCC/ClientApp/src/components/Chart/OptionView.vue

@@ -3,14 +3,14 @@
   <div class="flop">
     <!--cmy新写-->
     <!--初始页面-->
-    <Row class="headerTollBox" v-if="fullscreen === '0'" >
+    <Row class="headerTollBox" v-if="fullscreen === '0'">
       <p class="title">{{ currentIRSModel == 'irsImmediately' ? '單選題' : '文字題' }}</p>
 
       <div class="triggerbox" v-if="Answerstatus === 0">
         <div :class="['allstudents', btnname === 'allstudents' ? 'pickonall' : '']" v-if="status === 'default' || status === 'list'" @click="accurate('allstudents')">全部:{{ iconnum }}</div>
         <div :class="['unanswered-btn', btnname === 'unanswered-btn' ? 'pickonaun' : '']" v-if="status === 'default' || status === 'list'" @click="accurate('unanswered-btn')">未答:{{ noanswernum }}</div>
         <div :class="['answerbtn', btnname === 'answerbtn' ? 'pickonaan' : '']" v-if="status === 'default' || status === 'list'" @click="accurate('answerbtn')">已答:{{ answernum }}</div>
-      </div> 
+      </div>
 
       <!--未设定答案之前 用户类别切换end-->
       <!--设定答案之后 用户类别切换-->
@@ -24,20 +24,20 @@
 
       <div class="control-btngroup" :class="[statusshow ? 'thin' : '']">
         <div class="listicon" v-if="(status === 'list' || status === 'default') && currentIRSModel == 'irsImmediately'" :class="AnswerShowhide" @click="showhide(AnswerShowhide)"><img :src="ShowHideanswer" /></div>
-        <div class="resetAns listicon" @click="againanswer"><svg-icon icon-class="refresh" /></div>
+        <div class="resetAns listicon" @click="againanswer" v-show="current != 'bar'&&current != 'pie'"><svg-icon icon-class="refresh" /></div>
         <button @click="listbtn('list')" :class="['listicon', current === 'list' ? 'clickicon' : '']"><svg-icon icon-class="switchover" /></button>
         <!-- <button @click="listbtn('text')" :class='["listicon",current ==="text"? "clickicon":""]'><svg-icon icon-class="Text-icons" /></button> -->
         <!--设定答案-->
         <Poptip placement="bottom" :popper-class="poptipStyle">
-          <div v-show="currentIRSModel == 'irsImmediately'" :class="['listicon', current === 'num' ? 'clickicon' : '']" @click="listbtn('num')" v-if="AnswerIconstyle === 'letter'"><svg-icon icon-class="SetAnsEn" /></div>
-          <div v-show="currentIRSModel == 'irsImmediately'" :class="['listicon', current === 'num' ? 'clickicon' : '']" @click="listbtn('num')" v-if="AnswerIconstyle === 'number'"><svg-icon icon-class="SetAns" /></div>
+          <div v-show="currentIRSModel == 'irsImmediately'&&current != 'bar'&&current != 'pie'" :class="['listicon', current === 'num' ? 'clickicon' : '']" @click="listbtn('num')" v-if="AnswerIconstyle === 'letter'"><svg-icon icon-class="SetAnsEn" /></div>
+          <div v-show="currentIRSModel == 'irsImmediately'&&current != 'bar'&&current != 'pie'" :class="['listicon', current === 'num' ? 'clickicon' : '']" @click="listbtn('num')" v-if="AnswerIconstyle === 'number'"><svg-icon icon-class="SetAns" /></div>
           <div class="api" slot="content">
             <Result @poptipwidth="getpoptipwidth"></Result>
           </div>
         </Poptip>
         <!--设定答案end-->
-        <div v-show="currentIRSModel == 'irsImmediately'" @click="listbtn('bar')" :class="['listicon', current === 'bar' ? 'clickicon' : '']"><svg-icon icon-class="barchart" /></div>
-        <div v-show="currentIRSModel == 'irsImmediately'" @click="listbtn('pie')" :class="['listicon', current === 'pie' ? 'clickicon' : '']"><svg-icon icon-class="Piechart" /></div>
+        <div v-show="currentIRSModel == 'irsImmediately'&&noanswernum!=iconnum" @click="listbtn('bar')" :class="['listicon', current === 'bar' ? 'clickicon' : '']"><svg-icon icon-class="barchart" /></div>
+        <div v-show="currentIRSModel == 'irsImmediately'&&noanswernum!=iconnum" @click="listbtn('pie')" :class="['listicon', current === 'pie' ? 'clickicon' : '']"><svg-icon icon-class="Piechart" /></div>
         <!--div @click="listbtn('rank')" :class='["listicon",current ==="rank"? "clickicon":""]'><svg-icon icon-class="rank" /></div-->
       </div>
       <div class="roller">
@@ -47,16 +47,15 @@
         <div class="rightlisticon" @click="styleadjust(aspectRatio)"><svg-icon icon-class="full-screen" /></div>
         <div class="rightlisticon" @click="hiddenShow()"><svg-icon icon-class="Close" /></div>
       </div>
-
-
-      <div >
+      <div>
         <ul class="studycard" v-if="status === 'default'" ref="getheight" :style="'height:' + cssheightL + 'px;'">
           <!--默认-->
-          <li v-for="(item, index) in student" :key="index+'A'" :class="item.class" v-show="item.done && status === 'default' && Answerstatus === 0" :style="'width:' + widthvalue + 'px;margin-left:' + marginvalue + 'px;height:' + widthvalue + 'px;line-height:' + widthvalue + 'px'">
+          <li v-for="(item, index) in student" :key="index + 'A'" :class="item.class" v-show="item.done && status === 'default' && Answerstatus === 0" :style="'width:' + widthvalue + 'px;margin-left:' + marginvalue + 'px;height:' + widthvalue + 'px;line-height:' + widthvalue + 'px'">
             <div :class="{ 'ans-show-stuno': AnswerShowhide === 'AnswerShow' && item.option !== '' }">{{ item.sort }}</div>
+             <div class="ans-hide-star"  v-if="AnswerShowhide === 'AnswerHide' && item.option !== ''">*</div>
             <div class="offimg" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
             <!--作答答案-->
-            <div class="answer-default" v-if="AnswerShowhide === 'AnswerHide' && item.option !== ''"><span>*</span></div>
+           
             <div class="answer-default-show" v-if="AnswerShowhide === 'AnswerShow' && item.option !== ''">
               <span>{{ item.option }}</span>
             </div>
@@ -91,14 +90,12 @@
             <!--发言内容end-->
           </li>
           <!--设定答案后的默认-->
-          <li v-for="(item, index) in student" :key="index+'B'" :class="item.class" v-show="item.done && status === 'default' && Answerstatus === 1 && AnswerShowhide === 'AnswerHide'" :style="'width:' + widthvalue + 'px;margin-left:' + marginvalue + 'px;height:' + widthvalue + 'px;line-height:' + widthvalue + 'px'">
-            <span>{{ item.sort }}</span>
+          <li v-for="(item, index) in student" :key="index + 'B'" :class="item.class" v-show="item.done && status === 'default' && Answerstatus === 1 && AnswerShowhide === 'AnswerHide'" :style="'width:' + widthvalue + 'px;margin-left:' + marginvalue + 'px;height:' + widthvalue + 'px;line-height:' + widthvalue + 'px'">
+            
+              <div :class="{ 'ans-show-stuno': AnswerShowhide === 'AnswerShow' && item.option !== '' }">{{ item.sort }}</div>
+             <div class="ans-hide-star"  v-if="AnswerShowhide === 'AnswerHide' && item.option !== ''">*</div>
             <div class="offimg" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
             <!--作答答案-->
-            <div class="answer-default" v-if="AnswerShowhide === 'AnswerHide' && item.option !== ''"><span>*</span></div>
-            <div class="answer-default" v-if="AnswerShowhide === 'AnswerShow' && item.option !== ''">
-              <span>{{ item.option }}</span>
-            </div>
             <div class="answer-default" v-if="item.option === ''"><span> </span></div>
             <!--作答答案end-->
             <!--发言内容-->
@@ -129,12 +126,12 @@
             </q-dialog>
             <!--发言内容end-->
           </li>
-          <li v-for="(item, index) in student" :key="index+'C'" :class="item.answerclass" v-show="item.done && status === 'default' && Answerstatus === 1 && AnswerShowhide === 'AnswerShow'" :style="'width:' + widthvalue + 'px;margin-left:' + marginvalue + 'px;height:' + widthvalue + 'px;line-height:' + widthvalue + 'px'">
-            <span>{{ item.sort }}</span>
+          <li v-for="(item, index) in student" :key="index + 'C'" :class="item.answerclass" v-show="item.done && status === 'default' && Answerstatus === 1 && AnswerShowhide === 'AnswerShow'" :style="'width:' + widthvalue + 'px;margin-left:' + marginvalue + 'px;height:' + widthvalue + 'px;line-height:' + widthvalue + 'px'">
+               <div :class="{ 'ans-show-stuno': AnswerShowhide === 'AnswerShow' && item.option !== '' }">{{ item.sort }}</div>
+           
             <div class="offimg" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
             <!--作答答案 设定答案后-->
-            <div class="answer-default" v-if="AnswerShowhide === 'AnswerHide' && item.option !== ''"><span>*</span></div>
-            <div class="answer-default" v-if="AnswerShowhide === 'AnswerShow' && item.option !== ''">
+             <div class="answer-default-show" v-if="AnswerShowhide === 'AnswerShow' && item.option !== ''">
               <span>{{ item.option }}</span>
             </div>
             <div class="answer-default" v-if="item.option === ''"><span> </span></div>
@@ -171,14 +168,14 @@
         <!--名牌列表-->
         <ul class="vice-studyshowcard" v-if="status === 'list'" :style="'height:' + cssheightL + 'px;'">
           <!--未设置答案前-->
-          <li :class="item.showcardclass" v-for="(item, index) in student" :key="index+'D'" v-show="item.done && status === 'list' && Answerstatus === 0">
+          <li :class="item.showcardclass" v-for="(item, index) in student" :key="index + 'D'" v-show="item.done && status === 'list' && Answerstatus === 0">
             <div class="leftimg">
               <div class="idnumber">{{ item.sort }}</div>
               <div class="portrait"><img :src="item.headImg" /></div>
               <div class="mpoff" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
             </div>
             <div class="righttext">
-              <div class="showhide-answer" v-if="AnswerShowhide === 'AnswerHide' && item.option !== ''">*</div>
+              <div class="showhide-answer " v-if="AnswerShowhide === 'AnswerHide' && item.option !== ''">*</div>
               <div class="showhide-answer" v-if="AnswerShowhide === 'AnswerShow' && item.option !== ''">{{ item.option }}</div>
               <div class="showhide-answer" v-if="item.option === ''"></div>
               <!--名牌发言-->
@@ -213,7 +210,7 @@
           </li>
           <!--未设置答案前end-->
           <!--设置答案后  答案隐藏-->
-          <li :class="item.showcardclass" v-for="(item, index) in student" :key="index+'E'" v-show="item.done && status === 'list' && Answerstatus === 1 && AnswerShowhide === 'AnswerHide'">
+          <li :class="item.showcardclass" v-for="(item, index) in student" :key="index + 'E'" v-show="item.done && status === 'list' && Answerstatus === 1 && AnswerShowhide === 'AnswerHide'">
             <div class="leftimg">
               <div class="idnumber">{{ item.sort }}</div>
               <div class="portrait"><img :src="item.headImg" /></div>
@@ -255,7 +252,7 @@
           </li>
           <!--设置答案后  答案隐藏end-->
           <!--设置答案后  答案显示-->
-          <li :class="item.answerbrand" v-for="(item) in student" :key="item.id" v-if="item.done && status === 'list' && Answerstatus == 1 && AnswerShowhide === 'AnswerShow'">
+          <li :class="item.answerbrand" v-for="item in student" :key="item.id" v-show="item.done && status === 'list' && Answerstatus == 1 && AnswerShowhide === 'AnswerShow'">
             <div class="leftimg">
               <div class="idnumber">{{ item.sort }}</div>
               <div class="portrait"><img :src="item.headImg" /></div>
@@ -315,7 +312,7 @@
           </div>
         </ul>
         <!--排行榜-->
-        <ul class="vice-studyshowcard" v-if="status === 'rank'" :style="'height:' + cssheightL + 'px;' ">
+        <ul class="vice-studyshowcard" v-if="status === 'rank'" :style="'height:' + cssheightL + 'px;'">
           <li class="brand-rank" v-for="item in RankDatas" :key="item.id" v-show="item.done && status === 'rank'">
             <div class="leftimg">
               <div class="idnumber">{{ item.sort }}</div>
@@ -470,6 +467,29 @@ export default {
       this.dwidth = this.$refs.getheight.offsetWidth
       this.valuestyle()
     })
+    // mockstudents
+    // let mockstudents = []
+    // for (let i = 1; i <= 100; i++) {
+    //   mockstudents.push({
+    //     sort: i,
+    //     id: '711545724451'+i,
+    //     accountid: '1637115457243'+i,
+    //     studentName: 'louise'+i,
+    //     sendTime: 1637115468066,
+    //     headImg: 'https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png',
+    //     option: 'B',
+    //     done: true,
+    //     score: 0,
+    //     rank: '',
+    //     class: 'studyboxone',
+    //     showcardclass: 'brand',
+    //     answerclass: 'studyboxone',
+    //     answerbrand: 'brand',
+    //     statement: '',
+    //     status: 'online'
+    //   })
+    // }
+    // this.$store.state.students=mockstudents
   },
   computed: {
     watchStudents() {