update

HiTeachCE/ClientApp/src/components/Chart/Bar.vue

@@ -177,7 +177,7 @@
                 }
             },
         //二次作答柱状图
-            multiplecharbar(defaultcolor, Data, patternvalue) {
+            multiplecharbar(defaultcolor, multipleColor, multipleData, Data, patternvalue) {
                 // 基于准备好的dom，初始化echarts实例
                 let myChart = this.$echarts.init(document.getElementById('multiplebar'))
                 // 绘制图表
@@ -210,8 +210,8 @@
                     series: [{
                         name: '第一次作答',
                         type: 'bar',
-                        barWidth: 80,
-                        data: Data,
+                        barWidth: 50,
+                        data: multipleData,
                         itemStyle: {
                             normal: {
                                 //柱形图圆角，初始化效果
@@ -236,14 +236,14 @@
                         {
                             name: '第二次作答',
                             type: 'bar',
-                            barWidth: 80,
+                            barWidth: 50,
                             data: Data,
                             itemStyle: {
                                 normal: {
                                     //柱形图圆角，初始化效果
                                     barBorderRadius: [10, 10, 0, 0],
                                     color: function (params) {
-                                        var colorList = defaultcolor;
+                                        var colorList = multipleColor;
                                         return colorList[params.dataIndex]
                                     },
                                     label: {
@@ -278,12 +278,14 @@
             BarData(b) {
                 console.log(b,'b')
                 let newColor = ['#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF', '#0097FF']
+                let multipleColor = ['#3AED82', '#3AED82', '#3AED82', '#3AED82', '#3AED82', '#3AED82', '#3AED82', '#3AED82', '#3AED82', '#3AED82']
+                let multipleData = this.$store.state.FirstEcharAnswer
                 let nowpattern=this.letterOrnumber
                 let reuse = this.$store.state.FirstRecord
                 if (reuse.length != 0) {
                     this.multiplecharbar(newColor, b, nowpattern);
                 } else if (reuse.length == 0) {
-                    this.drawLine(newColor, b, nowpattern);
+                    this.drawLine(newColor, multipleColor, multipleData,b, nowpattern);
                 }
             },
             defaultcolor(e) {

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

@@ -794,6 +794,7 @@
                 let ant = value
                 if (ant === 'success') {
                     this.$store.state.FirstRecord = this.$store.state.students
+                    this.$store.state.FirstEcharAnswer = this.$store.state.echartbaranswer
                 }
                 let nowstudent = this.$store.state.students
                 for (var i = 0; i < nowstudent.length; i++) {

HiTeachCE/ClientApp/src/components/Tools/BasePick.vue

@@ -1,254 +1,301 @@
 <template>
-  <div class="move-box">
-    <div class="flex content-around column">
-      <div class="flex flex-center start-wrap">
-        <Icon :type="playIcon" class="btn-start" :style="playIcon=='md-pause'?'margin:0':''" @click="handlePickAction"/>
-        <!--<Icon type="md-play" class="btn-start" @click="handlePickAction" />-->
-      </div>
-
-      <div class="picker-conditions">
-        <CheckboxGroup v-model="checkVal">
-          <Checkbox label="repeat">重复挑人</Checkbox>
-          <Checkbox label="quick">快速挑人</Checkbox>
-        </CheckboxGroup>
-        <div class="picker-select">
-          <span>一次挑</span>
-          <Select v-model="pickNum" style="width:70px" @on-change="handleSelectNum">
-            <Option v-for="(item,index) in numList" :value="index" :key="item">{{ item }}</Option>
-          </Select>
-          <span>人</span>
-        </div>
-      </div>
-
-      <div class="result-box">
-        <div class="person-item" v-for="(item,index) in personList" :key="index" v-if="index < showLength">
-          <div class="person-box flex flex-center" :style="'background-image:url('+item.headImg+')' ">
-            <div class="person-name" v-if="item.studentName">{{item.studentName}}</div>
-            <span class="person-id" v-if="item.sort">{{item.sort}}</span>
-          </div>
+    <div class="move-box">
+        <div class="flex content-around column">
+            <div class="flex flex-center start-wrap">
+                <Icon :type="playIcon" class="btn-start" :style="playIcon=='md-pause'?'margin:0':''" @click="handlePickAction" />
+                <!--<Icon type="md-play" class="btn-start" @click="handlePickAction" />-->
+            </div>
+            <div class="picker-conditions">
+                <CheckboxGroup v-model="checkVal">
+                    <Checkbox label="repeat">重复挑人</Checkbox>
+                    <Checkbox label="quick">快速挑人</Checkbox>
+                </CheckboxGroup>
+                <div class="picker-select">
+                    <span>一次挑</span>
+                    <Select v-model="pickNum" style="width:70px" @on-change="handleSelectNum">
+                        <Option v-for="(item,index) in numList" :value="index" :key="item">{{ item }}</Option>
+                    </Select>
+                    <span>人</span>
+                </div>
+                <div class="picker-select" v-if="answershow">
+                    <span>挑选</span>
+                    <Select v-model="pickText" style="width:85px" @on-change="cons">
+                        <Option v-for="(item,index) in textList" :value="index" :key="item">{{ item }}</Option>
+                    </Select>
+                    <span>人</span>
+                </div>
+            </div>
+
+            <div class="result-box">
+                <div class="person-item" v-for="(item,index) in personList" :key="index" v-if="index < showLength">
+                    <div class="person-box flex flex-center" :style="'background-image:url('+item.headImg+')' ">
+                        <div class="person-name" v-if="item.studentName">{{item.studentName}}</div>
+                        <span class="person-id" v-if="item.sort">{{item.sort}}</span>
+                    </div>
+                </div>
+            </div>
+            <q-btn color="primary" :label="btnLable" @click="handlePickAction" />
         </div>
-      </div>
-      <q-btn color="primary" :label="btnLable" @click="handlePickAction" />
     </div>
-  </div>
 </template>
 
 <script>
-  export default {
-    name: "BasePick",
-    data() {
-      return {
-        // nameList: [
-        //   {   sort:1,
-        //     id:'123',
-        //     studentName:'王明',
-        //     sendTime:'123456546',
-        //     headImg:'https://cdn.quasar.dev/img/avatar.png',
-        //     singScore:10,
-        //     totalScore:20,
-        //     option:'A',},
-        //   { headImg: require("../../assets/img/head1.jpg"), studentName: "张三", id: "01" },
-        //   { headImg: require("../../assets/img/head2.jpg"), studentName: "李四", id: "02" },
-        //   { headImg: require("../../assets/img/head3.jpg"), studentName: "王五", id: "03" },
-        //   { headImg: require("../../assets/img/head4.jpg"), studentName: "孙六", id: "04" },
-        //   { headImg: require("../../assets/img/head4.jpg"), studentName: "孙一", id: "07" },
-        //   { headImg: require("../../assets/img/head4.jpg"), studentName: "李富贵", id: "08" },
-        //   { headImg: require("../../assets/img/head4.jpg"), studentName: "张强", id: "09" },
-        //   { headImg: require("../../assets/img/head4.jpg"), studentName: "朱珠", id: "10" },
-        //   { headImg: require("../../assets/img/head4.jpg"), studentName: "黄九", id: "11" }
-        // ],
-
-        nameList: this.$store.state.students,
-        pickNum: 0,
-        mytime: "",
-        checkVal: ["repeat", "quick"],
-        btnLable: "开始挑人",
-        numList: [1, 2, 3, 4, 5, 6],
-        personList: [],
-        showLength: 1,
-        playIcon:'md-play',
-      };
-    },
-    created() {
-      // pickName={headImg: require('../../assets/img/head1.jpg'), studentName: '李四'};
-      for (let i = 0; i < 6; i++) {
-        this.personList.push({ headImg: require("../../assets/img/question.jpg"), studentName: "", sort: "" });
-      }
-    },
-    methods: {
-      show() {
-        let that = this;
-      },
-
-      handleSelectNum(val) {
-        this.showLength = val + 1;
-        for (let i = 0; i < 6; i++) {
-          if(!this.personList[i]){
-            this.personList[i] = this.nameList[0]
-          }
-        }
-      },
-      handlePickAction() {
-        let that = this;
-        if(that.nameList.length == 0){
-          this.$Message.warning('暂无成员参与，无法进行挑人。');
-          return;
-        }
-        if (this.mytime == "") {
-          this.btnLable = "停止";
-          this.playIcon = "md-pause";
-          this.mytime = setInterval(function() {
-            that.personList = that.getArrItem(that.nameList,that.showLength);
-          }, 100);
-        }else {
-          this.btnLable = "继续挑人";
-          this.playIcon = "md-play";
-          window.clearInterval(that.mytime);
-          this.mytime = "";
-        }
+    export default {
+        name: "BasePick",
+        data() {
+            return {
+                nameList: this.$store.state.students,
+                pickNum: 0,
+                pickText: 0,
+                mytime: "",
+                checkVal: ["repeat", "quick"],
+                btnLable: "开始挑人",
+                numList: [1, 2, 3, 4, 5, 6],
+                textList: ['所有', '正确', '错误', '错→对'],
+                personList: [],
+                showLength: 1,
+                showTextlength:1,
+                playIcon: 'md-play',
+                answershow:false,
+            };
+        },
+        created() {
+            // pickName={headImg: require('../../assets/img/head1.jpg'), studentName: '李四'};
+            for (let i = 0; i < 6; i++) {
+                this.personList.push({ headImg: require("../../assets/img/question.jpg"), studentName: "", sort: "" });
+            }
+            this.init()
+        },
+        methods: {
+            init() {
+                let answers = this.$store.state.answerstatus
+                if (answers != 0) {
+                    this.answershow=true
+                }
+            },
+            cons(val) {
+                alert(this.pickText)
+            },
+            show() {
+                let that = this;
+            },
+            handleSelectNum(val) {
+                this.showLength = val + 1;
+                for (let i = 0; i < 6; i++) {
+                    if (!this.personList[i]) {
+                        this.personList[i] = this.nameList[0]
+                    }
+                }
+            },
+            handlePickAction() {
+                let that = this;
+                let status = that.$store.state.answerstatus
+                let avalue = that.$store.state.answervalue
+                let studentsinfo = that.$store.state.students
+                let oldstuden = that.$store.state.FirstRecord
+                if (that.nameList.length == 0) {
+                    this.$Message.warning('暂无成员参与，无法进行挑人。');
+                    return;
+                }
+                if (status ==0) {
+                    if (this.mytime == "") {
+                        this.btnLable = "停止";
+                        this.playIcon = "md-pause";
+                        this.mytime = setInterval(function () {
+                            that.personList = that.getArrItem(that.nameList, that.showLength);
+                        }, 100);
+                    } else {
+                        this.btnLable = "继续挑人";
+                        this.playIcon = "md-play";
+                        window.clearInterval(that.mytime);
+                        this.mytime = "";
+                    }
+                    if (this.checkVal.indexOf('quick') > -1) {
+                        setTimeout(() => {
+                            this.btnLable = "继续挑人";
+                            this.playIcon = "md-play";
+                            window.clearInterval(that.mytime);
+                            this.mytime = "";
+                        }, 5000);
+                    }
+                } else if (status == 1) {
+                    if (this.pickText == 1) {
+                        let successData = ''
+                        for (var i = 0; i < studentsinfo.length; i++) {
+                            if (studentsinfo[i].option == avalue[0]) {
+                                successData.push(studentsinfo[i])
+                            }
+                        }
+                        this.btnLable = "停止";
+                        this.playIcon = "md-pause";
+                        this.mytime = setInterval(function () {
+                            that.personList = that.getArrItem(successData, that.showLength);
+                        }, 100);
+                    } else if (this.pickText == 2) {
+                        let errorData = ''
+                        for (var i = 0; i < studentsinfo.length; i++) {
+                            if (studentsinfo[i].option != avalue[0]) {
+                                errorData.push(studentsinfo[i])
+                            }
+                        }
+                        this.btnLable = "停止";
+                        this.playIcon = "md-pause";
+                        this.mytime = setInterval(function () {
+                            that.personList = that.getArrItem(errorData, that.showLength);
+                        }, 100);
+                    } else if (this.pickText == 3) {
+                        let errortosuccessData = ''
+                        for (var i = 0; i < oldstuden.length; i++) {
+                            if (oldstuden[i].option != avalue[0]) {
+                                for (var y = 0; y < studentsinfo.length; y++) {
+                                    if (studentsinfo[i].option == avalue[0]) {
+                                        errortosuccessData.push(studentsinfo[i])
+                                    }
+                                }
+                            }
+                        }
+                        this.btnLable = "停止";
+                        this.playIcon = "md-pause";
+                        this.mytime = setInterval(function () {
+                            that.personList = that.getArrItem(errortosuccessData, that.showLength);
+                        }, 100);
+                    }
 
-        if(this.checkVal.indexOf('quick') > -1){
-          setTimeout(() => {
-            this.btnLable = "继续挑人";
-            this.playIcon = "md-play";
-            window.clearInterval(that.mytime);
-            this.mytime = "";
-          }, 5000);
-        }
-      },
-      refTest() {
-        let refs = this.$refs;
-        console.log(this.$refs);
-      },
-
-      getArrItem(arr, num) {
-        var temp_array = new Array();
-        for (var index in arr) {
-          temp_array.push(arr[index]);
-        }
-        var return_array = new Array();
-        for (var i = 0; i < num; i++) {
-          if (temp_array.length > 0) {
-            var arrIndex = Math.floor(Math.random() * temp_array.length);
-            return_array[i] = temp_array[arrIndex];
-            temp_array.splice(arrIndex, 1);
-          } else {
-            break;
-          }
-        }
-        return return_array;
-      }
-    },
-    mounted() {
-      this.refTest();
-    }
-  };
+                }
+            },
+            refTest() {
+                let refs = this.$refs;
+                console.log(this.$refs);
+            },
+            getArrItem(arr, num) {
+                var temp_array = new Array();
+                for (var index in arr) {
+                    temp_array.push(arr[index]);
+                }
+                var return_array = new Array();
+                for (var i = 0; i < num; i++) {
+                    if (temp_array.length > 0) {
+                        var arrIndex = Math.floor(Math.random() * temp_array.length);
+                        return_array[i] = temp_array[arrIndex];
+                        temp_array.splice(arrIndex, 1);
+                    } else {
+                        break;
+                    }
+                }
+                return return_array;
+            }
+        },
+        mounted() {
+            this.refTest();
+        },
+    };
 </script>
 
 <style>
-  .person-box {
-    position: relative;
-    background: url("../../assets/img/head0.jpg") no-repeat 0 0;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-    border: 4px solid #a8aaab;
-    font-size: 26px;
-    border-radius: 10px;
-  }
-
-  .start-wrap {
-    width: 120px;
-    height: 120px;
-    background: #027be3;
-    border-radius: 50%;
-    font-size: 80px;
-    margin: 0 auto;
-    cursor: pointer;
-  }
-  .btn-start {
-    color: #fff;
-    margin-left: 12px;
-  }
-
-  .picker-conditions {
-    margin: 20px 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .picker-select {
-    margin: 20px 0;
-  }
-
-  .picker-select .ivu-select {
-    margin: 0 20px;
-    height: 25px;
-    line-height: 25px;
-  }
-
-  .picker-conditions .ivu-checkbox-wrapper {
-    font-size: 14px;
-  }
-
-  .picker-select .ivu-select-selected-value {
-    line-height: 25px !important;
-    padding-left: 20px !important;
-  }
-
-  .picker-select .ivu-select-single .ivu-select-selection {
-    height: 25px;
-    line-height: 25px;
-  }
-
-  .picker-select .ivu-select-item {
-    padding: 7px 32px;
-  }
-
-  .person-name {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 40px;
-    color: #fff;
-    font-weight: bold;
-    letter-spacing: 3px;
-    background: rgba(113, 115, 116, 0.67);
-    text-align: center;
-  }
-
-  .person-id {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: #027be3;
-    color: #fff;
-    font-size: 18px;
-    font-weight: bold;
-    text-align: center;
-    line-height: 35px;
-    border: 2px solid rgb(153, 151, 151);
-  }
-
-  .result-box {
-    position: absolute;
-    width: 450px;
-    left: -450px;
-    top: -2px;
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-  }
-
-  .person-item {
-    width: 150px;
-    height: 150px;
-    /*border: 1px solid #fff;*/
-  }
+    .person-box {
+        position: relative;
+        background: url("../../assets/img/head0.jpg") no-repeat 0 0;
+        background-size: cover;
+        width: 100%;
+        height: 100%;
+        border: 4px solid #a8aaab;
+        font-size: 26px;
+        border-radius: 10px;
+    }
+
+    .start-wrap {
+        width: 120px;
+        height: 120px;
+        background: #027be3;
+        border-radius: 50%;
+        font-size: 80px;
+        margin: 0 auto;
+        cursor: pointer;
+    }
+
+    .btn-start {
+        color: #fff;
+        margin-left: 12px;
+    }
+
+    .picker-conditions {
+        margin: 20px 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .picker-select {
+        margin: 20px 0;
+    }
+
+        .picker-select .ivu-select {
+            margin: 0 20px;
+            height: 25px;
+            line-height: 25px;
+        }
+
+    .picker-conditions .ivu-checkbox-wrapper {
+        font-size: 14px;
+    }
+
+    .picker-select .ivu-select-selected-value {
+        line-height: 25px !important;
+        padding-left: 20px !important;
+    }
+
+    .picker-select .ivu-select-single .ivu-select-selection {
+        height: 25px;
+        line-height: 25px;
+    }
+
+    .picker-select .ivu-select-item {
+        padding: 7px 32px;
+    }
+
+    .person-name {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 40px;
+        color: #fff;
+        font-weight: bold;
+        letter-spacing: 3px;
+        background: rgba(113, 115, 116, 0.67);
+        text-align: center;
+    }
+
+    .person-id {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: #027be3;
+        color: #fff;
+        font-size: 18px;
+        font-weight: bold;
+        text-align: center;
+        line-height: 35px;
+        border: 2px solid rgb(153, 151, 151);
+    }
+
+    .result-box {
+        position: absolute;
+        width: 450px;
+        left: -450px;
+        top: -2px;
+        display: flex;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+    }
+
+    .person-item {
+        width: 150px;
+        height: 150px;
+        /*border: 1px solid #fff;*/
+    }
 </style>

HiTeachCE/ClientApp/src/store.js

@@ -114,7 +114,8 @@ export default new Vuex.Store({
         AnswerSelect: ["A","B","C","D"],
         AnswerNumselect: ["1", "2", "3", "4"],
         //二次作答
-        FirstRecord:[],
+        FirstRecord: [],
+        FirstEcharAnswer:'',
   mutations: {
 
         }