Merge branch 'develop3.0' of http://106.12.23.251:10080/TEAMMODEL/TEAMModelOS into develop3.0

TEAMModelOS/ClientApp/src/components/student-analysis/total/BaseClassRadar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :id="echartsId" class="myRadar"></div>
+    <div :id='echartsId' class='myRadar'></div>
   </div>
 </template>
 
@@ -24,11 +24,11 @@ export default {
       // 指定图表的配置项和数据
       var option = {
         title: {
-          text: "75",
-          top:"45%",
-          left:"43%",
+          text: '75',
+          top:'45%',
+          left:'43%',
           textStyle:{
-              color:"#fff",
+              color:'#fff',
               lineHeight:40,
               fontSize:30
           }
@@ -38,72 +38,72 @@ export default {
           bottom: 20,
           itemWidth: 12,
           itemHeight: 12,
-          data: ["班级平均", "年级平均"],
+          data: ['班级平均', '年级平均'],
           textStyle: {
-            color: "#fff"
+            color: '#fff'
           }
         },
         radar: {
-          radius: "60%",
+          radius: '60%',
           splitNumber: 8,
           axisLine: {
             lineStyle: {
-              color: "#fff",
+              color: '#fff',
               opacity: 0.2
             }
           },
           splitLine: {
             lineStyle: {
-              color: "#fff",
+              color: '#fff',
               opacity: 0.2
             }
           },
           splitArea: {
             areaStyle: {
-              color: "rgba(255,255,255,.3)",
+              color: 'rgba(255,255,255,.3)',
               opacity: 1,
               shadowBlur: 45,
-              shadowColor: "rgba(0,0,0,.5)",
+              shadowColor: 'rgba(0,0,0,.5)',
               shadowOffsetX: 0,
               shadowOffsetY: 15
             }
           },
           indicator: [
             {
-              name: "语文",
+              name: '语文',
               max: 100
             },
             {
-              name: "数学",
+              name: '数学',
               max: 100
             },
             {
-              name: "英语",
+              name: '英语',
               max: 100
             },
             {
-              name: "化学",
+              name: '化学',
               max: 100
             },
             {
-              name: "物理",
+              name: '物理',
               max: 100
             },
             {
-              name: "生物",
+              name: '生物',
               max: 100
             }
           ]
         },
         series: [
           {
-            name: "高一年级",
-            type: "radar",
+            name: '高一年级',
+            type: 'radar',
             symbolSize: 0,
             areaStyle: {
               normal: {
                 shadowBlur: 13,
-                shadowColor: "rgba(0,0,0,.2)",
+                shadowColor: 'rgba(0,0,0,.2)',
                 shadowOffsetX: 0,
                 shadowOffsetY: 10,
                 opacity: .4
@@ -119,7 +119,7 @@ export default {
                   90,
                   69,
                 ],
-                name: "班级平均"
+                name: '班级平均'
               },
               {
                 value: [
@@ -130,16 +130,19 @@ export default {
                   69,
                   66,
                 ],
-                name: "年级平均"
+                name: '年级平均'
               }
             ]
           }
         ],
-        color: ["#7db41b", "#b1eadb"],
+        color: ['#7db41b', '#b1eadb'],
       };
 
       // 绘制图表
-      myRadar.setOption(option);
+          myRadar.setOption(option);
+          window.addEventListener('resize', function () {
+             myRadar.resize()
+          })
     },
 
     
@@ -150,7 +153,7 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
+<!-- Add 'scoped' attribute to limit CSS to this component only -->
 <style scoped>
 .myRadar {
   width: 100%;

TEAMModelOS/ClientApp/src/components/student-analysis/total/BaseGeniusLine.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :id="echartsId" class="myLine"></div>
+    <div :id='echartsId' class='myLine'></div>
   </div>
 </template>
 
@@ -23,27 +23,27 @@ export default {
 
       // 指定图表的配置项和数据
       var option = {
-        color: ["#2adecf"],
+        color: ['#2adecf'],
         textStyle: {
-          color: "rgb(222,222,222)"
+          color: 'rgb(222,222,222)'
         },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            type: "shadow"
+            type: 'shadow'
           }
         },
         grid: {
           show: false,
           containLabel: true,
           height: 360,
-          width: "96%",
-          x2: "2%",
+          width: '96%',
+          x2: '2%',
           tooltip: {
             show: true,
-            trigger: "axis", // 触发类型
+            trigger: 'axis', // 触发类型
             textStyle: {
-              color: "#666"
+              color: '#666'
             }
           }
         },
@@ -56,18 +56,18 @@ export default {
             start: 0,
             end: 100,
             handleIcon:
-              "M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z",
-            handleSize: "160%",
+              'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
+            handleSize: '160%',
             handleStyle: {
-              color: "#d3dee5"
+              color: '#d3dee5'
             },
             textStyle: {
-              color: "#fff"
+              color: '#fff'
             },
-            borderColor: "#90979c"
+            borderColor: '#90979c'
           },
           {
-            type: "inside",
+            type: 'inside',
             show: true,
             height: 15,
             start: 0,
@@ -75,29 +75,29 @@ export default {
           }
         ],
         legend: {
-          data: ["优生人数", "优生率"],
+          data: ['优生人数', '优生率'],
           textStyle: {
-            color: "#FFFFFF"
+            color: '#FFFFFF'
           }
         },
         xAxis: [
           {
             data: [
-              "高一1班",
-              "高一2班",
-              "高一3班",
-              "高一4班",
-              "高一5班",
-              "高一6班",
-              "高一7班",
-              "高一8班",
-              "高一9班",
-              "高一10班"
+              '高一1班',
+              '高一2班',
+              '高一3班',
+              '高一4班',
+              '高一5班',
+              '高一6班',
+              '高一7班',
+              '高一8班',
+              '高一9班',
+              '高一10班'
             ],
             axisLine: {
               show: true,
               lineStyle: {
-                color: "#4e4e4e"
+                color: '#4e4e4e'
               }
             },
             splitLine: {
@@ -114,8 +114,8 @@ export default {
         ],
         yAxis: [
           {
-            type: "value",
-            name: "优生人数",
+            type: 'value',
+            name: '优生人数',
             axisLine: {
               show: false
             },
@@ -128,8 +128,8 @@ export default {
             axisLabel: {}
           },
           {
-            type: "value",
-            name: "优生率(%)",
+            type: 'value',
+            name: '优生率(%)',
             axisLine: {
               show: false
             },
@@ -144,20 +144,20 @@ export default {
         ],
         series: [
           {
-            name: "优生人数",
-            type: "bar",
-            barWidth: "20%",
+            name: '优生人数',
+            type: 'bar',
+            barWidth: '20%',
             itemStyle: {
               normal: {
                 barBorderRadius: [30, 30, 0, 0],
                 color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                   {
                     offset: 0,
-                    color: "#719aff"
+                    color: '#719aff'
                   },
                   {
                     offset: 1,
-                    color: "#51c3ff"
+                    color: '#51c3ff'
                   }
                 ])
               }
@@ -165,30 +165,30 @@ export default {
             data: [140, 110, 100, 90, 80, 70, 50, 40, 30, 20]
           },
           {
-            name: "优生率",
-            type: "line",
+            name: '优生率',
+            type: 'line',
             yAxisIndex: 1,
             itemStyle: {
               normal: {
-                color: "#ffe898",
+                color: '#ffe898',
                 barBorderRadius: [30, 30, 0, 0],
                 lineStyle: {
-                  color: "#ffe898"
+                  color: '#ffe898'
                 }
               }
             },
             data: [80, 77, 62, 66, 88, 75, 65, 68, 44, 88],
             markLine: {
-              symbol: "none",
+              symbol: 'none',
               itemStyle: {
                 normal: {
                   lineStyle: {
-                    type: "dashed",
-                    color: "red"
+                    type: 'dashed',
+                    color: 'red'
                   },
                   label: {
                     show: true,
-                    position: "left"
+                    position: 'left'
                   }
                 }
               },
@@ -205,14 +205,14 @@ export default {
               data: [
                 [
                   {
-                    name: "",
-                    xAxis: "",
-                    yAxis: ""
+                    name: '',
+                    xAxis: '',
+                    yAxis: ''
                   },
                   {
-                    name: "",
-                    xAxis: "",
-                    yAxis: ""
+                    name: '',
+                    xAxis: '',
+                    yAxis: ''
                   }
                 ]
               ]
@@ -222,7 +222,10 @@ export default {
       };
 
       // 绘制图表
-      myLine.setOption(option);
+          myLine.setOption(option);
+          window.addEventListener('resize', function () {
+                    myLine.resize()
+                })
     }
   },
   mounted() {
@@ -231,7 +234,7 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
+<!-- Add 'scoped' attribute to limit CSS to this component only -->
 <style scoped>
 .myLine {
   width: 100%;

TEAMModelOS/ClientApp/src/components/student-analysis/total/BaseGradeRadar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :id="echartsId" class="myRadar"></div>
+    <div :id='echartsId' class='myRadar'></div>
   </div>
 </template>
 
@@ -24,11 +24,11 @@ export default {
       // 指定图表的配置项和数据
       var option = {
         title: {
-          text: "75",
-          top:"45%",
-          left:"44%",
+          text: '75',
+          top:'45%',
+          left:'44%',
           textStyle:{
-              color:"#fff",
+              color:'#fff',
               lineHeight:40,
               fontSize:36
           }
@@ -38,72 +38,72 @@ export default {
           bottom: 20,
           itemWidth: 12,
           itemHeight: 12,
-          data: ["最高值", "最低值", "平均值"],
+          data: ['最高值', '最低值', '平均值'],
           textStyle: {
-            color: "#fff"
+            color: '#fff'
           }
         },
         radar: {
-          radius: "60%",
+          radius: '60%',
           splitNumber: 8,
           axisLine: {
             lineStyle: {
-              color: "#fff",
+              color: '#fff',
               opacity: 0.2
             }
           },
           splitLine: {
             lineStyle: {
-              color: "#fff",
+              color: '#fff',
               opacity: 0.2
             }
           },
           splitArea: {
             areaStyle: {
-              color: "rgba(255,255,255,.3)",
+              color: 'rgba(255,255,255,.3)',
               opacity: 1,
               shadowBlur: 45,
-              shadowColor: "rgba(0,0,0,.5)",
+              shadowColor: 'rgba(0,0,0,.5)',
               shadowOffsetX: 0,
               shadowOffsetY: 15
             }
           },
           indicator: [
             {
-              name: "语文",
+              name: '语文',
               max: 100
             },
             {
-              name: "数学",
+              name: '数学',
               max: 100
             },
             {
-              name: "英语",
+              name: '英语',
               max: 100
             },
             {
-              name: "化学",
+              name: '化学',
               max: 100
             },
             {
-              name: "物理",
+              name: '物理',
               max: 100
             },
             {
-              name: "生物",
+              name: '生物',
               max: 100
             }
           ]
         },
         series: [
           {
-            name: "高一年级",
-            type: "radar",
+            name: '高一年级',
+            type: 'radar',
             symbolSize: 0,
             areaStyle: {
               normal: {
                 shadowBlur: 13,
-                shadowColor: "rgba(0,0,0,.2)",
+                shadowColor: 'rgba(0,0,0,.2)',
                 shadowOffsetX: 0,
                 shadowOffsetY: 10,
                 opacity: .4
@@ -119,7 +119,7 @@ export default {
                   90,
                   89,
                 ],
-                name: "最高值"
+                name: '最高值'
               },
               {
                 value: [
@@ -130,7 +130,7 @@ export default {
                   62,
                   48,
                 ],
-                name: "最低值"
+                name: '最低值'
               },
               {
                 value: [
@@ -141,16 +141,19 @@ export default {
                   69,
                   66,
                 ],
-                name: "平均值"
+                name: '平均值'
               }
             ]
           }
         ],
-        color: ["#7db41b", "#b1eadb", "#b1aadb"],
+        color: ['#7db41b', '#b1eadb', '#b1aadb'],
       };
 
       // 绘制图表
-      myRadar.setOption(option);
+          myRadar.setOption(option);
+          window.addEventListener('resize', function () {
+                    myRadar.resize()
+                })
     },
 
     
@@ -161,7 +164,7 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
+<!-- Add 'scoped' attribute to limit CSS to this component only -->
 <style scoped>
 .myRadar {
   width: 100%;

TEAMModelOS/ClientApp/src/view/student-analysis/total-analysis/EvaluationList/TotalIndex.less

@@ -1,9 +1,13 @@
 .index-container {
+    height: 100%;
+    overflow: hidden;
+
     .section {
         width: 100%;
         padding: 20px;
         margin: 0 auto;
         max-width: 1600px;
+        user-select: none;
         font-family: '微軟正黑體', 'Heiti TC';
 
         &-title {
@@ -107,7 +111,7 @@
 
         .select-grade {
             position: absolute;
-            right: 0;
+            right: -30px;
             top: 20px;
             width: 300px;
             color: #fff;
@@ -116,6 +120,7 @@
 
         .select-semester {
             top: 0;
+            right: -50px;
         }
 
         .class-radar-box {
@@ -150,6 +155,11 @@
                 margin: 10px 0;
                 padding: 20px 0;
                 color: #fff;
+                cursor: pointer;
+
+                &:hover {
+                    background: #6F6E6E;
+                }
 
                 .exam-info-top {
 
@@ -192,6 +202,16 @@
         }
     }
 
+    .no-data-text {
+        width: 100%;
+        height: 100%;
+        font-size: 30px;
+        font-weight: bold;
+        color: #959595;
+        text-align: center;
+        padding-top: 30px;
+    }
+
     .exam-list-wrap {
 
         .el-filter-wrap {
@@ -200,6 +220,7 @@
             border-radius: 10px;
             padding: 20px;
             background: #404040;
+            overflow: hidden;
 
             .el-filter-item:first-child {
                 margin-top: 0px;

TEAMModelOS/ClientApp/src/view/student-analysis/total-analysis/EvaluationList/TotalIndex.vue

@@ -1,276 +1,234 @@
 <template>
     <div class="index-container">
-        <!-- 基本数据统计部分 -->
-        <div class="section">
-            <div class="section-title">
-                基本数据统计
-                <div class="select-grade select-semester">
-                    <Select v-model="selectSemester">
-                        <Option v-for="(item,index) in semesterList" :value="index" :key="index">{{ item }}</Option>
-                    </Select>
-                </div>
-            </div>
-            <div class="section-box">
-                <div class="base-data-item block-item">
-                    <div class="item-icon"><Icon type="md-people" /></div>
-                    <div class="item-content">
-                        <div class="item-num">98</div>
-                        <div class="item-name">教师人数</div>
+        <vuescroll>
+            <!-- 基本数据统计部分 -->
+            <div class="section">
+                <div class="section-title">
+                    基本数据统计
+                    <div class="select-grade select-semester">
+                        <Select v-model="selectSemester">
+                            <Option v-for="(item,index) in semesterList" :value="index" :key="index">{{ item }}</Option>
+                        </Select>
                     </div>
                 </div>
-                <div class="base-data-item block-item">
-                    <div class="item-icon"><Icon type="md-school" /></div>
-                    <div class="item-content">
-                        <div class="item-num">3655</div>
-                        <div class="item-name">学生人数</div>
+                <div class="section-box">
+                    <div class="base-data-item block-item">
+                        <div class="item-icon"><Icon type="md-people" /></div>
+                        <div class="item-content">
+                            <div class="item-num">98</div>
+                            <div class="item-name">教师人数</div>
+                        </div>
                     </div>
-                </div>
-                <div class="base-data-item block-item">
-                    <div class="item-icon"><Icon type="logo-youtube" /></div>
-                    <div class="item-content">
-                        <div class="item-num">3</div>
-                        <div class="item-name">学段数</div>
+                    <div class="base-data-item block-item">
+                        <div class="item-icon"><Icon type="md-school" /></div>
+                        <div class="item-content">
+                            <div class="item-num">3655</div>
+                            <div class="item-name">学生人数</div>
+                        </div>
                     </div>
-                </div>
-                <div class="base-data-item block-item">
-                    <div class="item-icon"><Icon type="md-podium" /></div>
-                    <div class="item-content">
-                        <div class="item-num">9</div>
-                        <div class="item-name">年级数</div>
+                    <div class="base-data-item block-item">
+                        <div class="item-icon"><Icon type="logo-youtube" /></div>
+                        <div class="item-content">
+                            <div class="item-num">3</div>
+                            <div class="item-name">学段数</div>
+                        </div>
                     </div>
-                </div>
-                <div class="base-data-item block-item">
-                    <div class="item-icon"><Icon type="md-tennisball" /></div>
-                    <div class="item-content">
-                        <div class="item-num">48</div>
-                        <div class="item-name">班级数</div>
+                    <div class="base-data-item block-item">
+                        <div class="item-icon"><Icon type="md-podium" /></div>
+                        <div class="item-content">
+                            <div class="item-num">9</div>
+                            <div class="item-name">年级数</div>
+                        </div>
+                    </div>
+                    <div class="base-data-item block-item">
+                        <div class="item-icon"><Icon type="md-tennisball" /></div>
+                        <div class="item-content">
+                            <div class="item-num">48</div>
+                            <div class="item-name">班级数</div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- 评测数据统计部分 -->
-        <div class="section">
-            <div class="section-title">
-                评测数据统计
-            </div>
-            <div class="section-box">
-                <div class="exam-data-item block-item">
-                    <div class="item-content">
-                        <div class="item-num">16</div>
-                        <div class="item-name">全部评测</div>
-                    </div>
+            <!-- 评测数据统计部分 -->
+            <div class="section">
+                <div class="section-title">
+                    评测数据统计
                 </div>
-                <div class="exam-data-item block-item">
-                    <div class="item-content">
-                        <div class="item-num">16</div>
-                        <div class="item-name">周考</div>
+                <div class="section-box">
+                    <div class="exam-data-item block-item">
+                        <div class="item-content">
+                            <div class="item-num">16</div>
+                            <div class="item-name">全部评测</div>
+                        </div>
                     </div>
-                </div>
-                <div class="exam-data-item block-item">
-                    <div class="item-content">
-                        <div class="item-num">2</div>
-                        <div class="item-name">期初考</div>
+                    <div class="exam-data-item block-item">
+                        <div class="item-content">
+                            <div class="item-num">16</div>
+                            <div class="item-name">周考</div>
+                        </div>
                     </div>
-                </div>
-                <div class="exam-data-item block-item">
-                    <div class="item-content">
-                        <div class="item-num">1</div>
-                        <div class="item-name">期中考</div>
+                    <div class="exam-data-item block-item">
+                        <div class="item-content">
+                            <div class="item-num">2</div>
+                            <div class="item-name">期初考</div>
+                        </div>
                     </div>
-                </div>
-                <div class="exam-data-item block-item">
-                    <div class="item-content">
-                        <div class="item-num">1</div>
-                        <div class="item-name">期末考</div>
+                    <div class="exam-data-item block-item">
+                        <div class="item-content">
+                            <div class="item-num">1</div>
+                            <div class="item-name">期中考</div>
+                        </div>
                     </div>
-                </div>
-                <div class="exam-data-item block-item">
-                    <div class="item-content">
-                        <div class="item-num">2</div>
-                        <div class="item-name">模拟测验</div>
+                    <div class="exam-data-item block-item">
+                        <div class="item-content">
+                            <div class="item-num">1</div>
+                            <div class="item-name">期末考</div>
+                        </div>
                     </div>
-                </div>
-                <div class="exam-data-item block-item">
-                    <div class="item-content">
-                        <div class="item-num">3</div>
-                        <div class="item-name">诊断测验</div>
+                    <div class="exam-data-item block-item">
+                        <div class="item-content">
+                            <div class="item-num">2</div>
+                            <div class="item-name">模拟测验</div>
+                        </div>
+                    </div>
+                    <div class="exam-data-item block-item">
+                        <div class="item-content">
+                            <div class="item-num">3</div>
+                            <div class="item-name">诊断测验</div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- 学科对比统计部分 -->
-        <div class="section">
-            <div class="section-title">
-                学科对比统计
+            <!-- 学科对比统计部分 -->
+            <div class="section">
+                <div class="section-title">
+                    学科对比统计
 
-            </div>
-            <div class="section-box">
-                <div class="radar-data-item radar-data-item-active block-item">
-                    <p class="radar-title">高一年级</p>
-                    <BaseGradeRadar echartsId="myRadar"></BaseGradeRadar>
                 </div>
-                <div class="radar-data-item block-item">
-                    <p class="radar-title">高二年级</p>
-                    <BaseGradeRadar echartsId="myRadar2"></BaseGradeRadar>
-                </div>
-                <div class="radar-data-item block-item">
-                    <p class="radar-title">高三年级</p>
-                    <BaseGradeRadar echartsId="myRadar3"></BaseGradeRadar>
-                </div>
-            </div>
-            <div class="section-box class-radar-box">
-                <div class="radar-data-item block-item"
-                     v-for="(item,index) in classList"
-                     :key="index"
-                     :style="{ marginLeft:(index === 0 || index % 4 === 0 ? '0' : '4%' )}">
-                    <p class="radar-title">高一 {{index + 1}} 班</p>
-                    <BaseClassRadar :echartsId="'classRadar'+ index"></BaseClassRadar>
+                <div class="section-box">
+                    <div class="radar-data-item radar-data-item-active block-item" @click="isShowClassRadar = !isShowClassRadar">
+                        <p class="radar-title">高一年级</p>
+                        <BaseGradeRadar echartsId="myRadar"></BaseGradeRadar>
+                    </div>
+                    <div class="radar-data-item block-item">
+                        <p class="radar-title">高二年级</p>
+                        <BaseGradeRadar echartsId="myRadar2"></BaseGradeRadar>
+                    </div>
+                    <div class="radar-data-item block-item">
+                        <p class="radar-title">高三年级</p>
+                        <BaseGradeRadar echartsId="myRadar3"></BaseGradeRadar>
+                    </div>
                 </div>
+                <transition name="fade">
+                    <div class="section-box class-radar-box" v-if="isShowClassRadar">
+                        <div class="radar-data-item block-item"
+                             v-for="(item,index) in classList"
+                             :key="index"
+                             :style="{ marginLeft:(index === 0 || index % 4 === 0 ? '0' : '4%' )}">
+                            <p class="radar-title">高一 {{index + 1}} 班</p>
+                            <BaseClassRadar :echartsId="'classRadar'+ index"></BaseClassRadar>
+                        </div>
 
-            </div>
-        </div>
-        <!-- 年级优生率统计部分 -->
-        <div class="section">
-            <div class="section-title">
-                年级优生率统计
-            </div>
-            <div class="section-box">
-                <div class="genius-data-item block-item">
-                    <div class="select-grade">
-                        <Select v-model="selectGrade">
-                            <Option v-for="(item,index) in gradeList" :value="index" :key="index">{{ item }}</Option>
-                        </Select>
                     </div>
-                    <BaseGeniusLine echartsId="myLine"></BaseGeniusLine>
-                </div>
-            </div>
-        </div>
-        <!-- 评测列表数据部分 -->
-        <div class="section exam-list-wrap">
-            <div class="section-title">
-                评测列表数据
-                <span class="filter-icon"><Icon type="ios-funnel" />筛选</span>
+                </transition>
             </div>
-            <div class="el-filter-wrap" slot="content" ref="filterRef">
-                <div class="el-filter-item">
-                    <span class="el-filter-title">{{$t('totalAnalysis.condition1')}}:</span>
-                    <RadioGroup v-model="filterPeriod" type="button" @on-change="filterPeriodChange">
-                        <Radio v-for="(item,index) in filterData.periodList" :label="item.name" :key="index">{{item.name}}</Radio>
-                    </RadioGroup>
-                </div>
-                <div class="el-filter-item">
-                    <span class="el-filter-title">{{$t('totalAnalysis.condition2')}}:</span>
-                    <RadioGroup v-model="filterGrade" type="button" @on-change="filterGradeChange">
-                        <Radio v-for="(item,index) in filterData.gradeList" :label="item.name" :key="index">{{item.name}}</Radio>
-                    </RadioGroup>
-                </div>
-                <div class="el-filter-item">
-                    <span class="el-filter-title">{{$t('totalAnalysis.condition3')}}:</span>
-                    <RadioGroup v-model="filterTerm" type="button" @on-change="filterTermChange">
-                        <Radio v-for="(item,index) in filterData.termList" :label="item.name" :key="index">{{item.name}}</Radio>
-                    </RadioGroup>
-                </div>
-                <div class="el-filter-item">
-                    <span class="el-filter-title">{{$t('totalAnalysis.condition4')}}:</span>
-                    <RadioGroup v-model="filterType" type="button" @on-change="filterTypeChange">
-                        <Radio v-for="(item,index) in filterData.typeList" :label="item.name" :key="index">{{item.name}}</Radio>
-                    </RadioGroup>
-                </div>
-                <div class="el-filter-item">
-                    <span class="el-filter-title">{{$t('totalAnalysis.condition5')}}:</span>
-                    <RadioGroup v-model="filterArea" type="button" @on-change="filterAreaChange">
-                        <Radio v-for="(item,index) in filterData.areaList" :label="item.name" :key="index">{{item.name}}</Radio>
-                    </RadioGroup>
-                </div>
-                <div class="el-filter-item">
-                    <span class="el-filter-title">{{$t('totalAnalysis.condition6')}}:</span>
-                    <RadioGroup v-model="filterFeedback" type="button" @on-change="filterFeedbackChange">
-                        <Radio v-for="(item,index) in filterData.feedbackList" :label="item.name" :key="index">{{item.name}}</Radio>
-                    </RadioGroup>
+            <!-- 年级优生率统计部分 -->
+            <div class="section">
+                <div class="section-title">
+                    年级优生率统计
                 </div>
-                <div class="el-filter-item">
-                    <span class="el-filter-title">{{$t('totalAnalysis.condition7')}}:</span>
-                    <RadioGroup v-model="filterSubject" type="button" @on-change="filterSubjectChange">
-                        <Radio v-for="(item,index) in filterData.subjectList" :label="item.name" :key="index">{{item.name}}</Radio>
-                    </RadioGroup>
+                <div class="section-box">
+                    <div class="genius-data-item block-item">
+                        <div class="select-grade">
+                            <Select v-model="selectGrade">
+                                <Option v-for="(item,index) in gradeList" :value="index" :key="index">{{ item }}</Option>
+                            </Select>
+                        </div>
+                        <BaseGeniusLine echartsId="myLine"></BaseGeniusLine>
+                    </div>
                 </div>
             </div>
-            <div class="el-bread">
-                <!--<Icon type="ios-arrow-forward" />-->
-                <span>{{$t('totalAnalysis.text5')}}：</span>
-                <span v-if="!hasCondition">{{$t('totalAnalysis.text9')}}</span>
-                <span v-for="(item,index) in filterList" :key="index" class="filter-item" v-if="item.val">{{item.val}} <Icon type="ios-close" @click="handleRemove(index,item.keyName)" /></span>
-                <span class="list-length">{{$t('totalAnalysis.text6')}} : {{examList.length}} </span>
-            </div>
-            <div class="section-box list-box">
-                <div class="genius-data-item exam-item">
-                    <div class="exam-info-top">
-                        <span class="exam-type">校内评测</span>
-                        <span class="exam-name">成都青城山学校2016年初一年级期中考试</span>
-                        <span class="exam-subjects">
-                            <span class="exam-subject">语文</span>
-                            <span class="exam-subject">数学</span>
-                            <span class="exam-subject">英语</span>
-                            <span class="exam-subject">物理</span>
-                            <span class="exam-subject">化学</span>
-                            <span class="exam-subject">生物</span>
-                        </span>
-                    </div>
-                    <div class="exam-info-bottom">
-                        <span>考试时间： 2019-08-15</span>
-                        <span>参与人数： 1688</span>
-                        <span>实际参与人数： 1680</span>
-                        <span>达成率： 98%</span>
-                        <span>平均分： 455</span>
-                        <span>得分率： 88%</span>
-                    </div>
+            <!-- 评测列表数据部分 -->
+            <div class="section exam-list-wrap">
+                <div class="section-title">
+                    评测列表数据
+                    <span class="filter-icon" @click="isShowFilter = !isShowFilter"><Icon type="ios-funnel" />筛选</span>
                 </div>
-                <div class="genius-data-item exam-item">
-                    <div class="exam-info-top">
-                        <span class="exam-type">校内评测</span>
-                        <span class="exam-name">成都青城山学校2016年初一年级期中考试</span>
-                        <span class="exam-subjects">
-                            <span class="exam-subject">语文</span>
-                            <span class="exam-subject">数学</span>
-                            <span class="exam-subject">英语</span>
-                            <span class="exam-subject">物理</span>
-                            <span class="exam-subject">化学</span>
-                            <span class="exam-subject">生物</span>
-                        </span>
-                    </div>
-                    <div class="exam-info-bottom">
-                        <span>考试时间： 2019-08-15</span>
-                        <span>参与人数： 1688</span>
-                        <span>实际参与人数： 1680</span>
-                        <span>达成率： 98%</span>
-                        <span>平均分： 455</span>
-                        <span>得分率： 88%</span>
+                <transition name="fade">
+                    <div class="el-filter-wrap" v-show="isShowFilter">
+                        <div class="el-filter-item">
+                            <span class="el-filter-title">{{$t('totalAnalysis.condition1')}}:</span>
+                            <RadioGroup v-model="filterPeriod" type="button" @on-change="filterPeriodChange">
+                                <Radio v-for="(item,index) in filterData.periodList" :label="item.name" :key="index">{{item.name}}</Radio>
+                            </RadioGroup>
+                        </div>
+                        <div class="el-filter-item">
+                            <span class="el-filter-title">{{$t('totalAnalysis.condition2')}}:</span>
+                            <RadioGroup v-model="filterGrade" type="button" @on-change="filterGradeChange">
+                                <Radio v-for="(item,index) in filterData.gradeList" :label="item.name" :key="index">{{item.name}}</Radio>
+                            </RadioGroup>
+                        </div>
+                        <div class="el-filter-item">
+                            <span class="el-filter-title">{{$t('totalAnalysis.condition3')}}:</span>
+                            <RadioGroup v-model="filterTerm" type="button" @on-change="filterTermChange">
+                                <Radio v-for="(item,index) in filterData.termList" :label="item.name" :key="index">{{item.name}}</Radio>
+                            </RadioGroup>
+                        </div>
+                        <div class="el-filter-item">
+                            <span class="el-filter-title">{{$t('totalAnalysis.condition4')}}:</span>
+                            <RadioGroup v-model="filterType" type="button" @on-change="filterTypeChange">
+                                <Radio v-for="(item,index) in filterData.typeList" :label="item.name" :key="index">{{item.name}}</Radio>
+                            </RadioGroup>
+                        </div>
+                        <div class="el-filter-item">
+                            <span class="el-filter-title">{{$t('totalAnalysis.condition5')}}:</span>
+                            <RadioGroup v-model="filterArea" type="button" @on-change="filterAreaChange">
+                                <Radio v-for="(item,index) in filterData.areaList" :label="item.name" :key="index">{{item.name}}</Radio>
+                            </RadioGroup>
+                        </div>
+                        <div class="el-filter-item">
+                            <span class="el-filter-title">{{$t('totalAnalysis.condition6')}}:</span>
+                            <RadioGroup v-model="filterFeedback" type="button" @on-change="filterFeedbackChange">
+                                <Radio v-for="(item,index) in filterData.feedbackList" :label="item.name" :key="index">{{item.name}}</Radio>
+                            </RadioGroup>
+                        </div>
+                        <div class="el-filter-item">
+                            <span class="el-filter-title">{{$t('totalAnalysis.condition7')}}:</span>
+                            <RadioGroup v-model="filterSubject" type="button" @on-change="filterSubjectChange">
+                                <Radio v-for="(item,index) in filterData.subjectList" :label="item.name" :key="index">{{item.name}}</Radio>
+                            </RadioGroup>
+                        </div>
                     </div>
+                </transition>
+                <div class="el-bread">
+                    <!--<Icon type="ios-arrow-forward" />-->
+                    <span>{{$t('totalAnalysis.text5')}}：</span>
+                    <span v-if="!hasCondition">{{$t('totalAnalysis.text9')}}</span>
+                    <span v-for="(item,index) in filterList" :key="index" class="filter-item" v-if="item.val">{{item.val}} <Icon type="ios-close" @click="handleRemove(index,item.keyName)" /></span>
+                    <span class="list-length">{{$t('totalAnalysis.text6')}} : {{examList.length}} </span>
                 </div>
-                <div class="genius-data-item exam-item">
-                    <div class="exam-info-top">
-                        <span class="exam-type">校内评测</span>
-                        <span class="exam-name">成都青城山学校2016年初一年级期中考试</span>
-                        <span class="exam-subjects">
-                            <span class="exam-subject">语文</span>
-                            <span class="exam-subject">数学</span>
-                            <span class="exam-subject">英语</span>
-                            <span class="exam-subject">物理</span>
-                            <span class="exam-subject">化学</span>
-                            <span class="exam-subject">生物</span>
-                        </span>
-                    </div>
-                    <div class="exam-info-bottom">
-                        <span>考试时间： 2019-08-15</span>
-                        <span>参与人数： 1688</span>
-                        <span>实际参与人数： 1680</span>
-                        <span>达成率： 98%</span>
-                        <span>平均分： 455</span>
-                        <span>得分率： 88%</span>
+                <div class="section-box list-box">
+                    <div class="no-data-text" v-if="!examList.length">暂无数据</div>
+                    <div class="genius-data-item exam-item" v-else v-for="(item,index) in examList" :key="index" @click="handleChooseExam(item,index)">
+                        <div class="exam-info-top">
+                            <span class="exam-type">{{item.conditions.range}}</span>
+                            <span class="exam-name">{{item.name}}</span>
+                            <span class="exam-subjects">
+                                <span class="exam-subject" v-for="(subject,index) in item.conditions.subject" :key="index">{{ subject }}</span>
+                            </span>
+                        </div>
+                        <div class="exam-info-bottom">
+                            <span>考试时间： {{item.time}}</span>
+                            <span>参与人数： {{item.stuCount}}</span>
+                            <span>实际参与人数： 1680</span>
+                            <span>达成率： 98%</span>
+                            <span>平均分： 455</span>
+                            <span>得分率： 88%</span>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+            </vuescroll>
     </div>
 </template>
 
@@ -283,6 +241,8 @@
         components: { BaseGradeRadar, BaseGeniusLine, BaseClassRadar },
         data() {
             return {
+                isShowClassRadar:false,
+                isShowFilter:false,
                 classList: new Array(11).fill("1"),
                 gradeList: ['高一', '高二', '高三'],
                 semesterList: ['2019上学期', '2019下学期'],
@@ -457,36 +417,36 @@
 </style>
 
 <style>
-    .ivu-select {
+    .index-container .ivu-select {
         width: auto;
     }
 
-    .ivu-select-selection {
+    .index-container .ivu-select-selection {
         width: 150px;
         background: none;
         margin-left: 100px;
         border: 2px solid #737373;
     }
 
-    .ivu-select-selected-value {
+    .index-container .ivu-select-selected-value {
         color: #fff;
     }
 
-    .ivu-select-visible .ivu-select-selection,
-    .ivu-select-selection-focused, .ivu-select-selection:hover {
+    .index-container .ivu-select-visible .index-container .ivu-select-selection,
+    .index-container .ivu-select-selection-focused, .index-container .ivu-select-selection:hover {
         border: 2px solid #737373;
     }
 
-    .ivu-select-dropdown {
+    .index-container .ivu-select-dropdown {
         width: 150px;
         min-width: 150px !important;
     }
 
-    .ivu-radio-group {
+    .index-container .ivu-radio-group {
         padding-bottom: 4px;
     }
 
-    .ivu-radio-wrapper {
+    .index-container .ivu-radio-wrapper {
         padding: 0 10px;
         margin-left: 15px;
         height: 28px;
@@ -521,4 +481,13 @@
         color: #fff !important;
     }
 
+    .fade-enter-active, .fade-leave-active {
+      transition: all .4s;
+    }
+    .fade-enter, .fade-leave-active {
+      transform: translate3d(0, 3rem, 0);
+      opacity: 0;
+    }
+
+
 </style>