update:分数区间开发

src/modules/teacher/data/exam/components/QuestionType.vue

 <template>
-  <el-card class="box-card" style="height: 450px">
+  <el-card class="box-card">
     <div slot="header" class="clearfix">
-      <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">题型数据</h1>
-    </div>
-    <div style="height: 350px; width: 90%; margin: 0 auto">
-      <div id="type" style="width: 100%; height: 90%"></div>
-      <div style="margin-bottom: 10px">
-        <div class="dec dec1">客观题正确率：<span class="dec" style="color: #aa1941">待评价</span></div>
-        <div class="dec dec1">主观题正确率：<span class="dec" style="color: #919191">待评价</span></div>
-      </div>
+      <h1 style="font-size: 28px">题型数据</h1>
     </div>
+    <div id="type" style="width: 310px; height: 360px"></div>
+    <div>客观题正确率76%</div>
+    <div>主观题正确率24%</div>
   </el-card>
 </template>
 
@@ -26,9 +22,9 @@ export default {
           }
         },
         grid: {
-          left: '10%',
+          left: '30%',
           right: '5%',
-          bottom: '10%',
+          bottom: '20%',
           containLabel: true
         },
         xAxis: [
@@ -36,11 +32,7 @@ export default {
             type: 'category',
             data: ['单选题', '多选题', '判断题', '情景题', '实操题'],
             axisTick: {
-              alignWithLabel: true,
-              show: false
-            },
-            splitLine: {
-              show: false
+              alignWithLabel: true
             }
           }
         ],
@@ -51,12 +43,6 @@ export default {
             data: ['0%', '20%', '40%', '60%', '80%', '100%'],
             axisLabel: {
               formatter: '{value} %'
-            },
-            axisLine: {
-              show: true
-            },
-            splitLine: {
-              show: false
             }
           }
         ],
@@ -65,15 +51,7 @@ export default {
             name: 'Direct',
             type: 'bar',
             barWidth: '30%',
-            data: [20, 40, 60, 80, 100],
-            itemStyle: {
-              normal: {
-                color: function (params) {
-                  const colorList = ['#6F85CC', '#96C080', '#EAC370', '#B170CE', '#D96685']
-                  return colorList[params.dataIndex]
-                }
-              }
-            }
+            data: [20, 40, 60, 80, 100]
           }
         ]
       }
@@ -86,13 +64,4 @@ export default {
 }
 </script>
 
-<style>
-.dec {
-  color: #606266;
-  font-weight: 400;
-  font-size: 12px;
-}
-.dec1 {
-  margin-left: 80px;
-}
-</style>
+<style></style>

src/modules/teacher/data/exam/components/ScoreRange.vue

@@ -3,13 +3,18 @@
     <el-card class="box-card" style="height: 450px">
       <div slot="header" class="clearfix">
         <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">考分区间</h1>
-        <el-button type="text" style="font-size: 16px; color: #aa1941; float: right; margin-top: -35px">设置</el-button>
+        <el-button type="text" style="font-size: 16px; color: #aa1941; float: right; margin-top: -35px" @click="isSetScoreRange = true">设置</el-button>
       </div>
       <div style="height: 400px; width: 90%; margin: 0 auto">
         <div id="score" style="width: 100%; height: 90%"></div>
       </div>
     </el-card>
-    <set-score-range class="pop"></set-score-range>
+    <set-score-range
+      class="pop"
+      v-if="isSetScoreRange"
+      @close="isSetScoreRange = false"
+      @scoreRangeChange="scoreRangeChange"
+    ></set-score-range>
   </div>
 </template>
 
@@ -20,6 +25,8 @@ export default {
   components: { SetScoreRange },
   data() {
     return {
+      data: [],
+      isSetScoreRange: false,
       option: {
         tooltip: {
           trigger: 'item'
@@ -57,13 +64,7 @@ export default {
             labelLine: {
               show: false
             },
-            data: [
-              { value: 1048, name: 'Search Engine', itemStyle: { color: '#6F85CC' } },
-              { value: 735, name: 'Direct', itemStyle: { color: '#96C080' } },
-              { value: 580, name: 'Email', itemStyle: { color: '#EAC370' } },
-              { value: 484, name: 'Union Ads', itemStyle: { color: '#D96685' } },
-              { value: 300, name: 'Video Ads', itemStyle: { color: '#B170CE' } }
-            ]
+            data: this.data
           }
         ]
       }
@@ -72,6 +73,18 @@ export default {
   mounted() {
     const myChart = echarts.init(document.getElementById('score'))
     myChart.setOption(this.option)
+  },
+  methods: {
+    scoreRangeChange(data) {
+      // [
+      //         { value: 1048, name: 'Search Engine', itemStyle: { color: '#6F85CC' } },
+      //         { value: 735, name: 'Direct', itemStyle: { color: '#96C080' } },
+      //         { value: 580, name: 'Email', itemStyle: { color: '#EAC370' } },
+      //         { value: 484, name: 'Union Ads', itemStyle: { color: '#D96685' } },
+      //         { value: 300, name: 'Video Ads', itemStyle: { color: '#B170CE' } }
+      //       ]
+      this.isSetScoreRange = false
+    }
   }
 }
 </script>

src/modules/teacher/data/exam/components/SetScoreRange.vue

@@ -25,7 +25,7 @@
         </div>
       </div>
       <div class="btn-box">
-        <div class="btn">取消</div>
+        <div class="btn" @click="$emit('close')">取消</div>
         <div class="btn" @click="confirmTag">确认</div>
       </div>
     </el-card>
@@ -34,6 +34,8 @@
 
 <script>
 export default {
+  props: {
+  },
   data() {
     return {
       tagInput: '',
@@ -72,7 +74,7 @@ export default {
         if (cur !== 0) prev.push({ a: findPrev ? findPrev.b : 0, b: cur })
         return prev
       }, [])
-      console.log(data)
+      this.$emit('scoreRangeChange', data)
     }
   }
 }