2021-6-29

src/components/assembly/histogram.vue

@@ -0,0 +1,127 @@
+<template>
+    <div id="itemChart" :style="{ width: '240px', height: '177px', marginTop:'15px'}"></div>
+</template>
+<script>
+export default {
+  data() {
+        
+    },
+      mounted() {
+    this.drawLine();
+  },
+  methods:{
+      drawLine() {
+          console.log(11111)
+          var data = [10, 52, 60, 78,];
+          for(var i = 0; i < data.length; i++){
+		data[i] = {
+			value: data[i],
+			itemStyle:{
+				color: data[i] >= 75 ? '#39D095' : '#508CEE'
+			}
+		}
+	}
+      let itemChart = this.$echarts.init(document.getElementById("itemChart"));
+      // 绘制图表
+      itemChart.setOption({
+           tooltip: {
+        trigger: 'axis',
+        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+        }
+    },
+    grid: {
+        left: '-7%',
+        right: '0%',
+        bottom: '-2%',
+        containLabel: true,
+        height:170
+    },
+      xAxis: [
+          {
+            type: "category",
+            data: [
+              "A",
+              "B",
+              "C",
+              "D",
+            ],
+            axisTick: {
+                alignWithLabel: true
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#D9D9D9",
+              },
+            },
+            axisLabel: {
+              //x轴文字的配置
+              show: true,
+              textStyle: {
+                color: "#999",
+                fontSize: 13,
+                // align: "right",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+         yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#999",
+              },
+            },
+            max : 100,
+            min : 0,
+            interval : 25,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dashed",
+                color: "#D9D9D9",
+              },
+            },
+            axisTick: {
+              //y轴刻度线
+              show: false,
+            },
+            axisLine: {
+              //y轴
+              show: false,
+            },
+            axisLabel: {
+              //x轴文字的配置
+              show: true,
+              margin: 40,
+              textStyle: {
+                color: "#999",
+                fontSize: 13,
+                align: "left",
+              },
+            },
+          },
+        ],
+    series: [
+        {
+            name: '直接访问',
+            type: 'bar',
+            barWidth: '20',
+            itemStyle: {
+            normal: {
+                color:'#508CEE'
+                }
+            },
+            data:data
+        }
+    ]
+      });
+    },
+  }
+}
+</script>

src/components/customer/tk_dt_fx.vue

@@ -94,71 +94,86 @@
         </div>
         <div class="fx_box">
           <div class="title">
-            <span class="active">答题分析</span>
-            <span>学生作答分析</span>
+            <span :class="i == selectNav?'active':''" v-for="(item,i) in nav" :key="item" @click="selectNav=selectNav==1?0:1">{{item}}</span>
           </div>
-          <div class="dt_fx">
-            <li class="d-f j-s active">
-              <img src="" alt="">
+          <div class="dt_fx" v-show="selectNav == 0">
+            <li
+              class="d-f j-s"
+              :class="item == 1 ? 'active' : ''"
+              v-for="item in 4"
+              :key="item"
+            >
+              <img src="" alt="" />
               <div>
-                  <div class="df_tj">
-                    <div class="df_tit">得分统计：</div>
-                    <div class="df_table">
-                      <li>
-                        <span>答案</span>
-                        <span>A</span>
-                        <span>B</span>
-                        <span>C</span>
-                        <span>D</span>
-                      </li>
-                      <li>
-                        <span>人数</span>
-                        <span>10</span>
-                        <span>50</span>
-                        <span>15</span>
-                        <span>30</span>
-                      </li>
-                    </div>
+                <div class="df_tj">
+                  <div class="df_tit">得分统计：</div>
+                  <div class="df_table">
+                    <li>
+                      <span>答案</span>
+                      <span>A</span>
+                      <span>B</span>
+                      <span>C</span>
+                      <span>D</span>
+                    </li>
+                    <li>
+                      <span>人数</span>
+                      <span>10</span>
+                      <span>50</span>
+                      <span>15</span>
+                      <span>30</span>
+                    </li>
                   </div>
-                  <!-- <histogram></histogram> -->
+                </div>
+                <!-- <histogram></histogram> -->
+                <div
+                  class="roseChart"
+                  :style="{
+                    width: '240px',
+                    height: '177px',
+                    marginTop: '15px',
+                  }"
+                ></div>
               </div>
             </li>
           </div>
+          <div class="xs_fx" v-show="selectNav == 1">
+               <div class="d-f j-s table_head">
+            <li>姓名</li>
+            <li>字号</li>
+            <li>得分</li>
+            <li>客观题</li>
+            <li>主观题</li>
+            <li>名次</li>
+            <li>失分题</li>
+            <li>操作</li>
         </div>
-        <!-- 
-        <div class="d-f j-s table_head">
-          <li>作业名称</li>
-          <li>满分</li>
-          <li>最高分</li>
-          <li>平均分</li>
-          <li>及格率</li>
-          <li>答题人数</li>
-          <li>上传时间</li>
-          <li>操作</li>
-        </div>
-        <div class="cap_table">
-          <li v-for="(item, i) in tableData" :key="i" class="d-f j-s">
-            <div>{{ item.title }}</div>
-            <div>{{ item.mf }}</div>
-            <div>{{ item.zgf }}</div>
-            <div>{{ item.pjf }}</div>
-            <div>{{ item.jgl }}</div>
-            <div class="d-f">
-              <div class="contrasts">
-                <span>{{ item.jd }}/</span>
-                <span>{{ item.zt }}</span>
+         <div class="cap_table">
+          <li v-for='(item,i) in tableData' :key='i' class="d-f j-s">
+              <div>{{item.title}}</div>
+              <div>{{item.mf}}</div>
+              <div>{{item.zgf}}</div>
+              <div>{{item.pjf}}</div>
+              <div>{{item.zgf}}</div>
+              <div class="d-f">{{item.pjf}}
+                  <!-- <el-progress :percentage="item.js_num" :stroke-width='8' :color="item.jd == item.zt?'#0A9DFF':'#FA0A2F'"></el-progress>
+                  <div class="contrasts">
+                      <span>{{item.jd}}/</span>
+                  <span>{{item.zt}}</span>
+                  </div> -->
+              </div>
+              <div>{{item.time}}</div>
+              <div class="operation">
+                  <!-- <span @click="tk_py(item.title)">批阅</span> -->
+                  <span @click="tk_py(item.title)">查看</span>
               </div>
-            </div>
-            <div>{{ item.time }}</div>
-            <div class="operation">
-              <span>查看</span>
-            </div>
           </li>
         </div>
         <div class="d-f j-s pagePagin">
           <el-pagination background layout="prev, pager, next" :total="100">
           </el-pagination>
-        </div> -->
+        </div>
+          </div>
+        </div>
       </div>
     </div>
     <!-- <foot></foot> -->
@@ -168,6 +183,7 @@
 import topNav from "@/components/assembly/topnav";
 import topHead from "@/components/assembly/head";
 import foot from "@/components/assembly/foot";
+// import histogram from "@/components/assembly/histogram";
 export default {
   data() {
     return {
@@ -175,113 +191,115 @@ export default {
         region: "全部",
         value1: "",
       },
+      nav:['答题分析','学生作答分析'],
+      selectNav:0,
       title: "",
       tableData: [
         {
-          time: "2016-05-02",
-          title: "集合的概念",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 1,
           zt: 48,
           jd: 40,
           jgl: "80%",
           js_num: 83,
         },
         {
-          time: "2016-05-02",
-          title: "基本初等函数（1）",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 2,
           zt: 48,
           jd: 40,
           jgl: "80%",
           js_num: 83,
         },
         {
-          time: "2016-05-02",
-          title: "函数的应用",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 3,
           zt: 48,
           jd: 40,
           jgl: "80%",
           js_num: 83,
         },
         {
-          time: "2016-05-02",
-          title: "空间几何体",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 5,
           zt: 48,
           jd: 48,
           jgl: "80%",
           js_num: 100,
         },
         {
-          time: "2016-05-02",
-          title: "点、直线、平面间距",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 6,
           zt: 48,
           jd: 48,
           jgl: "80%",
           js_num: 100,
         },
         {
-          time: "2016-05-02",
-          title: "直线与方程",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 6,
           zt: 48,
           jd: 48,
           jgl: "80%",
           js_num: 100,
         },
         {
-          time: "2016-05-02",
-          title: "圆与方程",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 9,
           zt: 48,
           jd: 48,
           jgl: "80%",
           js_num: 100,
         },
         {
-          time: "2016-05-02",
-          title: "算法初步",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 8,
           zt: 48,
           jd: 48,
           jgl: "80%",
           js_num: 100,
         },
         {
-          time: "2016-05-02",
-          title: "统计",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 7,
           zt: 48,
           jd: 48,
           jgl: "80%",
           js_num: 100,
         },
         {
-          time: "2016-05-02",
-          title: "概率",
-          mf: 100,
+          time: "第一题，第二题，第三题",
+          title: "王程程",
+          mf: '01001',
           zgf: 92,
-          pjf: 78,
+          pjf: 5,
           zt: 48,
           jd: 48,
           jgl: "80%",
@@ -295,8 +313,120 @@ export default {
   },
   mounted() {
     this.drawLine();
+    this.drawRose();
   },
   methods: {
+    drawRose() {
+      var roseCharts = document.getElementsByClassName("roseChart");
+      console.log(roseCharts)
+       var data = [10, 52, 60, 78,];
+          for(var i = 0; i < data.length; i++){
+		data[i] = {
+			value: data[i],
+			itemStyle:{
+				color: data[i] >= 75 ? '#39D095' : '#508CEE'
+			}
+		}
+	}
+      for (var i = 0; i < 4; i++) {
+        var itemChart = this.$echarts.init(roseCharts[i]);
+        // 绘制图表
+        itemChart.setOption({
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+            },
+          },
+          grid: {
+            left: "-7%",
+            right: "0%",
+            bottom: "-2%",
+            containLabel: true,
+            height: 170,
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: ["A", "B", "C", "D"],
+              axisTick: {
+                alignWithLabel: true,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#D9D9D9",
+                },
+              },
+              axisLabel: {
+                //x轴文字的配置
+                show: true,
+                textStyle: {
+                  color: "#999",
+                  fontSize: 13,
+                  // align: "right",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: "value",
+              axisLabel: {
+                formatter: "{value}",
+                textStyle: {
+                  color: "#999",
+                },
+              },
+              max: 100,
+              min: 0,
+              interval: 25,
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: "dashed",
+                  color: "#D9D9D9",
+                },
+              },
+              axisTick: {
+                //y轴刻度线
+                show: false,
+              },
+              axisLine: {
+                //y轴
+                show: false,
+              },
+              axisLabel: {
+                //x轴文字的配置
+                show: true,
+                margin: 40,
+                textStyle: {
+                  color: "#999",
+                  fontSize: 13,
+                  align: "left",
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              name: "直接访问",
+              type: "bar",
+              barWidth: "20",
+              itemStyle: {
+                normal: {
+                  color: "#508CEE",
+                },
+              },
+              data: data,
+            },
+          ],
+        });
+      }
+    },
     jump(id) {
       if (id == 2) {
         //作业分析
@@ -311,29 +441,26 @@ export default {
       let myChart = this.$echarts.init(document.getElementById("myChart"));
       // 绘制图表
       myChart.setOption({
-           tooltip: {
-        trigger: 'axis',
-        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-        }
-    },
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '-2%',
-        containLabel: true,
-        height:170
-    },
-      xAxis: [
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "-2%",
+          containLabel: true,
+          height: 170,
+        },
+        xAxis: [
           {
             type: "category",
-            data: [
-              "0-50",
-              "50-70",
-              "70-100",
-            ],
+            data: ["0-50", "50-70", "70-100"],
             axisTick: {
-                alignWithLabel: true
+              alignWithLabel: true,
             },
             axisLine: {
               lineStyle: {
@@ -354,7 +481,7 @@ export default {
             },
           },
         ],
-         yAxis: [
+        yAxis: [
           {
             type: "value",
             axisLabel: {
@@ -363,9 +490,9 @@ export default {
                 color: "#999",
               },
             },
-            max : 100,
-            min : 0,
-            interval : 25,
+            max: 100,
+            min: 0,
+            interval: 25,
             splitLine: {
               show: true,
               lineStyle: {
@@ -393,27 +520,27 @@ export default {
             },
           },
         ],
-    series: [
-        {
-            name: '直接访问',
-            type: 'bar',
-            barWidth: '40',
-             itemStyle: {
-            normal: {
-                color:'#1EA1F5'
-                }
-             },
-            data: [10, 52, 60, 78, 85,55, 20]
-        }
-    ]
+        series: [
+          {
+            name: "直接访问",
+            type: "bar",
+            barWidth: "40",
+            itemStyle: {
+              normal: {
+                color: "#1EA1F5",
+              },
+            },
+            data: [10, 52, 60, 78, 85, 55, 20],
+          },
+        ],
       });
     },
     tk_py(title) {
       // console.log(title)
-      this.$router.push({ path: "/tk_yp", query: { title } });
+      this.$router.push({ path: "/tk_xs_fx", query: { title:this.title , names:title} });
     },
   },
-  components: { topHead, topNav, foot },
+  components: { topHead, topNav, foot, },
 };
 </script>
 <style scoped>
@@ -427,91 +554,94 @@ export default {
 #myChart canvas {
   width: 100%;
 }
-.dt_fx>li{
+.xs_fx{
+  background: #fff;
+}
+.dt_fx > li {
   width: 100%;
-  background: #F9F9F9;
-border: 1px solid #DFDFDF;
-height: 333px;
-padding: 20px;
-box-sizing: border-box;
-margin: 20px 0;
-}
-.df_tj .df_tit{
+  background: #f9f9f9;
+  border: 1px solid #dfdfdf;
+  height: 333px;
+  padding: 20px;
+  box-sizing: border-box;
+  margin: 20px 0;
+}
+.df_tj .df_tit {
   font-size: 13px;
-font-family: Microsoft YaHei;
-font-weight: 400;
-color: #15213D;
-margin-bottom: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #15213d;
+  margin-bottom: 15px;
 }
-.dt_fx>li>div{
+.dt_fx > li > div {
   margin-left: 100px;
 }
-.df_tj .df_table{
+.df_tj .df_table {
   width: 240px;
-height: 68px;
-background: #FFFFFF;
-border-radius: 4px;
+  height: 68px;
+  background: #ffffff;
+  border-radius: 4px;
 }
 .df_tj .df_table li {
   display: flex;
   justify-content: space-between;
-  border-bottom:1px solid #E9F7F5;
+  border-bottom: 1px solid #e9f7f5;
 }
-.df_tj .df_table li:last-child,.df_tj .df_table li span:last-child{
+.df_tj .df_table li:last-child,
+.df_tj .df_table li span:last-child {
   border: none;
 }
-.df_tj .df_table li span{
+.df_tj .df_table li span {
   width: 20%;
   text-align: center;
   line-height: 34px;
-  border-right:1px solid #E9F7F5;
+  border-right: 1px solid #e9f7f5;
   font-size: 13px;
-font-family: Microsoft YaHei;
-font-weight: 400;
-color: #15213D;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #15213d;
 }
 .df_tj .df_table li:last-child span {
   font-weight: bold;
 }
-.df_tj .df_table li:last-child span:first-child{
+.df_tj .df_table li:last-child span:first-child {
   font-weight: normal;
 }
-.dt_fx>li.active{
-  background: #E9F7F5;
-border: 1px solid #AFEEE3;
-
+.dt_fx > li.active {
+  background: #e9f7f5;
+  border: 1px solid #afeee3;
 }
-.fx_box{
+.fx_box {
   background: #fff;
   padding: 0 20px 1px 20px;
 }
-.fx_box .title span{
+.fx_box .title span {
   display: inline-block;
   margin-right: 45px;
   cursor: pointer;
 }
-.fx_box .title span.active{
+.fx_box .title span.active {
   font-weight: bold;
-  color: #1EA1F5;
+  color: #1ea1f5;
   position: relative;
 }
-.fx_box .title span.active::after{
-  content: '';
+.fx_box .title span.active::after {
+  content: "";
   display: inline-block;
   width: 100%;
-  height: 1px;
-  background:#1EA1F5;
+  height: 2px;
+  background: #1ea1f5;
   position: absolute;
   bottom: -18px;
   left: 0;
 }
-.fx_box .title{
-  border-bottom: 1px solid #EBEBEB;
+.fx_box .title {
+  border-bottom: 1px solid #ebebeb;
   padding: 30px 0 18px 0;
   font-size: 15px;
-font-family: Microsoft YaHei;
-font-weight: 400;
-color: #666666;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #666666;
 }
 .census_box,
 .census_cj {
@@ -521,8 +651,8 @@ color: #666666;
   box-sizing: border-box;
   border-bottom: 1px solid #f4f4f4;
 }
-.cj_echarts .title{
-    margin-left: 30px;
+.cj_echarts .title {
+  margin-left: 30px;
 }
 .census_cj .title {
   font-size: 15px;
@@ -606,6 +736,7 @@ color: #666666;
 .operation span {
   color: #0a9dff;
   font-size: 14px;
+  cursor: pointer;
 }
 .container {
   background: #f4f4f4;
@@ -635,21 +766,22 @@ color: #666666;
   font-size: 14px;
   color: #333;
 }
-.cap_table li > div:nth-child(2),
+
 .cap_table li > div:nth-child(3),
 .cap_table li > div:nth-child(4),
+.cap_table li > div:nth-child(6),
 .cap_table li > div:nth-child(5) {
   font-weight: bold;
 }
-.cap_table li > div:nth-child(6) > div {
-  color: #0a9dff !important;
+.cap_table li > div:nth-child(7) {
+  color: #0A9DFF;
 }
-.table_head li:nth-child(1),
 .table_head li:nth-child(7),
-.cap_table li > div:nth-child(1),
 .cap_table li > div:nth-child(7) {
-  width: 15%;
+  width: 25%;
 }
+.table_head li:nth-child(1),
+.cap_table li > div:nth-child(1),
 .table_head li:nth-child(2),
 .table_head li:nth-child(3),
 .table_head li:nth-child(4),
@@ -658,7 +790,7 @@ color: #666666;
 .cap_table li > div:nth-child(3),
 .cap_table li > div:nth-child(4),
 .cap_table li > div:nth-child(5) {
-  width: 12%;
+  width: 10%;
 }
 .table_head li:nth-child(8),
 .cap_table li > div:nth-child(8) {
@@ -666,7 +798,7 @@ color: #666666;
 }
 .table_head li:nth-child(6),
 .cap_table li > div:nth-child(6) {
-  width: 12%;
+  width: 10%;
 }
 .rightContent {
   width: 100%;
@@ -714,5 +846,8 @@ color: #666666;
 .pagePagin .el-pagination {
   margin-left: auto;
 }
+.pagePagin{
+  margin-bottom: 20px;
+}
 </style>
 

src/components/customer/tk_xs_fx.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="page scroll-x">
+    <topHead></topHead>
+    <topNav></topNav>
+    <div class="container d-f">
+      <div class="leftMenu">
+        <li @click="jump(1)">
+          <i class="iconfont iconbanji"></i>
+          <span>我的班级</span>
+        </li>
+        <li @click="jump(2)">
+          <i class="iconfont iconyuejuan"></i> <span>阅卷任务</span>
+        </li>
+        <li class="active">
+          <i class="iconfont iconzuoye1"></i><span>作业分析</span>
+        </li>
+        <li @click="jump(3)">
+          <i class="iconfont iconcuoti1"></i><span>错题分析</span>
+        </li>
+      </div>
+      <div class="rightContent">
+        <div class="recordTitle">
+          <span>作业中心 > </span>
+          <span @click="black_list" class="black">作业分析></span>
+          <span @click="black_list2" class="black">{{ title }}></span>
+          <span>{{ names }}</span>
+        </div>
+        <div class=" d-f j-s census_box">
+          <div class="title">
+              <div>{{ names }}</div>
+              <div>《 {{title}}》答题情况</div>
+          </div>
+          <div class="d-f census_fbx">
+            <li>
+              <div>
+                <img src="../../assets/zy1.png" alt="" />
+              </div>
+              <div>
+                <span>满分</span>
+                <span>100</span>
+              </div>
+            </li>
+            <li>
+              <div>
+                <img src="../../assets/zy2.png" alt="" />
+              </div>
+              <div>
+                <span>最高分</span>
+                <span>100</span>
+              </div>
+            </li>
+            <li>
+              <div>
+                <img src="../../assets/zy3.png" alt="" />
+              </div>
+              <div>
+                <span>主观题</span>
+                <span>86</span>
+              </div>
+            </li>
+          </div>
+        </div>
+        <div class="fx_box">
+            <div class="title">答题分析</div>
+          <div class="dt_fx">
+            <li
+              class="d-f j-s"
+              :class="item == 1 ? 'active' : ''"
+              v-for="item in 4"
+              :key="item"
+            >
+              <img src="" alt="" />
+              <div>
+                <div class="df_tj">
+                  <div class="df_tit">得分统计：</div>
+                  <div class="df_table">
+                    <li>
+                      <span>答案</span>
+                      <span>A</span>
+                      <span>B</span>
+                      <span>C</span>
+                      <span>D</span>
+                    </li>
+                    <li>
+                      <span>人数</span>
+                      <span>10</span>
+                      <span>50</span>
+                      <span>15</span>
+                      <span>30</span>
+                    </li>
+                  </div>
+                </div>
+                <!-- <histogram></histogram> -->
+                <div
+                  class="roseChart"
+                  :style="{
+                    width: '240px',
+                    height: '177px',
+                    marginTop: '15px',
+                  }"
+                ></div>
+              </div>
+            </li>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <foot></foot> -->
+  </div>
+</template>
+<script>
+import topNav from "@/components/assembly/topnav";
+import topHead from "@/components/assembly/head";
+import foot from "@/components/assembly/foot";
+// import histogram from "@/components/assembly/histogram";
+export default {
+  data() {
+    return {
+      title: "",
+      names: "",
+    };
+  },
+  created() {
+    this.title = this.$route.query.title;
+    this.names = this.$route.query.names;
+  },
+  mounted() {
+    this.drawRose();
+  },
+  methods: {
+    drawRose() {
+      var roseCharts = document.getElementsByClassName("roseChart");
+      console.log(roseCharts);
+      var data = [10, 52, 60, 78];
+      for (var i = 0; i < data.length; i++) {
+        data[i] = {
+          value: data[i],
+          itemStyle: {
+            color: data[i] >= 75 ? "#39D095" : "#508CEE",
+          },
+        };
+      }
+      for (var i = 0; i < 4; i++) {
+        var itemChart = this.$echarts.init(roseCharts[i]);
+        // 绘制图表
+        itemChart.setOption({
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+            },
+          },
+          grid: {
+            left: "-7%",
+            right: "0%",
+            bottom: "-2%",
+            containLabel: true,
+            height: 170,
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: ["A", "B", "C", "D"],
+              axisTick: {
+                alignWithLabel: true,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#D9D9D9",
+                },
+              },
+              axisLabel: {
+                //x轴文字的配置
+                show: true,
+                textStyle: {
+                  color: "#999",
+                  fontSize: 13,
+                  // align: "right",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: "value",
+              axisLabel: {
+                formatter: "{value}",
+                textStyle: {
+                  color: "#999",
+                },
+              },
+              max: 100,
+              min: 0,
+              interval: 25,
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: "dashed",
+                  color: "#D9D9D9",
+                },
+              },
+              axisTick: {
+                //y轴刻度线
+                show: false,
+              },
+              axisLine: {
+                //y轴
+                show: false,
+              },
+              axisLabel: {
+                //x轴文字的配置
+                show: true,
+                margin: 40,
+                textStyle: {
+                  color: "#999",
+                  fontSize: 13,
+                  align: "left",
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              name: "直接访问",
+              type: "bar",
+              barWidth: "20",
+              itemStyle: {
+                normal: {
+                  color: "#508CEE",
+                },
+              },
+              data: data,
+            },
+          ],
+        });
+      }
+    },
+    jump(id) {
+      if (id == 2) {
+        //作业分析
+        this.$router.push("/task1");
+      }
+    },
+    //返回作业分析
+    black_list() {
+      this.$router.push("/tk_fx");
+    },
+    //返回上一级
+    black_list() {
+      this.$router.push("/tk_fx");
+    },
+  },
+  components: { topHead, topNav, foot },
+};
+</script>
+<style scoped>
+#myChart {
+  background: #fff;
+  /* padding: 20px 0; */
+  box-sizing: border-box;
+  margin-top: 17px;
+}
+
+#myChart canvas {
+  width: 100%;
+}
+.xs_fx {
+  background: #fff;
+}
+.dt_fx > li {
+  width: 100%;
+  background: #f9f9f9;
+  border: 1px solid #dfdfdf;
+  height: 333px;
+  padding: 20px;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+}
+.df_tj .df_tit {
+  font-size: 13px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #15213d;
+  margin-bottom: 15px;
+}
+.dt_fx > li > div {
+  margin-left: 100px;
+}
+.df_tj .df_table {
+  width: 240px;
+  height: 68px;
+  background: #ffffff;
+  border-radius: 4px;
+}
+.df_tj .df_table li {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e9f7f5;
+}
+.df_tj .df_table li:last-child,
+.df_tj .df_table li span:last-child {
+  border: none;
+}
+.df_tj .df_table li span {
+  width: 20%;
+  text-align: center;
+  line-height: 34px;
+  border-right: 1px solid #e9f7f5;
+  font-size: 13px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #15213d;
+}
+.df_tj .df_table li:last-child span {
+  font-weight: bold;
+}
+.df_tj .df_table li:last-child span:first-child {
+  font-weight: normal;
+}
+.dt_fx > li.active {
+  background: #e9f7f5;
+  border: 1px solid #afeee3;
+}
+.fx_box {
+  background: #fff;
+  padding: 0 20px 1px 20px;
+}
+.fx_box .title span {
+  display: inline-block;
+  margin-right: 45px;
+  cursor: pointer;
+}
+.fx_box .title span.active {
+  font-weight: bold;
+  color: #1ea1f5;
+  position: relative;
+}
+.fx_box .title span.active::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  height: 2px;
+  background: #1ea1f5;
+  position: absolute;
+  bottom: -18px;
+  left: 0;
+}
+.fx_box .title {
+  border-bottom: 1px solid #ebebeb;
+  padding: 0px 0 20px 0;
+ font-size: 15px;
+font-family: Microsoft YaHei;
+font-weight: bold;
+color: #1EA1F5;
+}
+.census_box {
+  background: #fff;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.census_box .title div:first-child {
+  font-size: 17px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #333333;
+  margin-top: 20px;
+}
+.census_box .title>div:last-child{
+    font-size: 15px;
+font-family: Microsoft YaHei;
+font-weight: 400;
+color: #50AFF6;
+margin-top: 16px;
+}
+.census_fbx li > div:first-child {
+  width: 48px;
+  height: 48px;
+  margin: auto 0;
+  margin-right: 17px;
+}
+.census_fbx li {
+  display: flex;
+  margin-top: 30px;
+  margin-right: 85px;
+  margin-bottom: 10px;
+}
+.census_fbx li span {
+  display: block;
+}
+.census_box li span:first-child {
+  font-size: 13px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #666666;
+  margin-bottom: 10px;
+}
+.census_box li span:last-child {
+  font-size: 28px;
+  font-family: Bahnschrift;
+  font-weight: 400;
+  color: #333333;
+}
+.recordTitle .black {
+  cursor: pointer;
+}
+.operation span {
+  color: #0a9dff;
+  font-size: 14px;
+  cursor: pointer;
+}
+.container {
+  background: #f4f4f4;
+  /* margin-bottom: 40px; */
+  margin-top: 30px;
+}
+.rightContent {
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+.recordTitle {
+  font-size: 13px;
+  color: #cccccc;
+  margin: 0 0 15px 0;
+}
+.recordTitle span:last-child {
+  color: #666;
+}
+
+.leftMenu {
+  width: 230px;
+  padding: 10px 0;
+  background-color: #fff;
+  height: 176px;
+}
+.leftMenu i {
+  /* width: 14px;
+  height: 14px;*/
+  /* vertical-align: middle;  */
+  display: inline-block;
+  margin-left: 24px;
+  margin-right: 16px;
+}
+.leftMenu li {
+  height: 44px;
+  line-height: 44px;
+  width: 100%;
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+  border-left: 2px solid #fff;
+  box-sizing: border-box;
+}
+.leftMenu li.active {
+  background: #ffe8ec;
+  border-left: 2px solid #fa0a2f;
+  color: #fa0a2f;
+}
+.pagePagin .el-pagination {
+  margin-left: auto;
+}
+.pagePagin {
+  margin-bottom: 20px;
+}
+</style>
+

src/router/index.js

@@ -11,6 +11,7 @@ import Tk_yp from '@/components/customer/tk_yp'
 import Tk_xsyp from '@/components/customer/tk_xsyp'
 import Tk_fx from '@/components/customer/tk_fx'
 import Tk_dt_fx from '@/components/customer/tk_dt_fx'
+import Tk_xs_fx from '@/components/customer/tk_xs_fx'
 
 
 
@@ -54,6 +55,15 @@ export default new Router({
       }
     },
     {
+      path: '/tk_xs_fx',
+      name: 'Tk_xs_fx',
+      component: Tk_xs_fx,
+      meta:{
+        title:'学生答题分析',
+        requiresAuth: true 
+      }
+    },
+    {
       path: '/task',
       name: 'Task',
       component: Task,