成绩分析

src/api.js

@@ -181,6 +181,16 @@ export default {
 	getStatistic: params => {
 	    return axios.get(`${baseURL}/api/admin/teacher/mark/paper/statistic`, { params: params })
 	},
+	getqueStatistic: params => {
+	    return axios.get(`${baseURL}/api/admin/teacher/mark/paper/que/statistic`, { params: params })
+	},
+	getStdStatistic: params => {
+	    return axios.get(`${baseURL}/api/admin/teacher/mark/paper/students/statistic/list`, { params: params })
+	},
+	getStudentansDetail: params => {
+	    return axios.get(`${baseURL}/api/admin/teacher/mark/paper/students/statistic`, { params: params })
+	},
+
     // 学生阅卷任务
     delMarkTaskStudents: params => {
         return axios.delete(`${baseURL}/api/admin/marktask/students`, { params: params })

src/main.js

@@ -9,6 +9,7 @@ import './iconfont/iconfont.css';
 import api from './api';
 import constant from './constant'
 import  './assets/icon-font/iconfont.css'
+import echarts from 'echarts'
 // import echarts from 'echarts';
 // import 'echarts/theme/dark.js'
 // import FullCalendar from 'vue-fullcalendar'
@@ -35,7 +36,7 @@ Vue.component('vue-ueditor-wrap', VueUeditorWrap)
 Vue.use(ElementUI);
 Vue.prototype.$api = api;
 Vue.prototype.$const = constant;
-
+Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
 Vue.prototype.msgSuccess = function(msg) {
     this.$message({ showClose: true, message: msg, type: "success" });

src/router.js

@@ -131,7 +131,21 @@ export default new Router({
 				    component: () =>
 				        import ('./views/tasks/work_analysis.vue'),
 				    name: '成绩分析'
-				}
+				},
+				{
+				    path: '/task/answer_analysis',
+				    component: () =>
+				        import ('./views/tasks/answer_analysis.vue'),
+				    name: '成绩分析',
+					hide: 1,
+				},
+				{
+				    path: '/task/std_analysis',
+				    component: () =>
+				        import ('./views/tasks/stdAnalysis'),
+				    name: '成绩分析',
+					hide: 1,
+				},
             ]
         },
         {

src/views/tasks/answer_analysis.vue

@@ -0,0 +1,807 @@
+<template>
+	<section class="content">
+		<div class="breadcrumb" style="background-color: #fff;padding: 20px 10px 10px;">
+			<el-breadcrumb separator="/">
+				<el-breadcrumb-item>阅卷管理</el-breadcrumb-item>
+				<el-breadcrumb-item><a href="javascript:history.back(-1)">成绩分析</a></el-breadcrumb-item>
+				<el-breadcrumb-item>{{title}}</el-breadcrumb-item>
+			</el-breadcrumb>
+		</div>
+		<div class="rightContent">
+		    <div class="census_box">
+		      <div class="title">{{ title }}</div>
+		      <div class="d-f j-s census_fbx">
+		        <li>
+		          <div>
+		            <img src="../../assets/zy1.png" alt="" />
+		          </div>
+		          <div>
+		            <span>满分</span>
+		            <span>{{ info.full_score }}</span>
+		          </div>
+		        </li>
+		        <li>
+		          <div>
+		            <img src="../../assets/zy2.png" alt="" />
+		          </div>
+		          <div>
+		            <span>最高分</span>
+		            <span>{{ info.max_score }}</span>
+		          </div>
+		        </li>
+		        <li>
+		          <div>
+		            <img src="../../assets/zy3.png" alt="" />
+		          </div>
+		          <div>
+		            <span>平均分</span>
+		            <span>{{ info.avg_score }}</span>
+		          </div>
+		        </li>
+		        <li>
+		          <div>
+		            <img src="../../assets/zy4.png" alt="" />
+		          </div>
+		          <div>
+		            <span>答题人数</span>
+		            <span>{{ info.marked_students }}/{{ info.total_students }}</span>
+		          </div>
+		        </li>
+		        <li>
+		          <div>
+		            <img src="../../assets/zy5.png" alt="" />
+		          </div>
+		          <div>
+		            <span>及格率</span>
+		            <span>{{ info.pass_rate }}</span>
+		          </div>
+		        </li>
+		      </div>
+		    </div>
+		    <div class="d-f j-s census_cj">
+		      <div class="cj_table">
+		        <div class="title">成绩分布统计</div>
+		        <div class="tables_fd">
+		          <div><span>分数段</span><span>人数</span></div>
+		          <div v-for="(item, i) in score_table" :key="i + 'score'">
+		            <span>{{ item.score_range }}</span
+		            ><span>{{ item.score_num }}</span>
+		          </div>
+		        </div>
+		      </div>
+		      <div class="cj_echarts">
+		        <div class="title">成绩分布图</div>
+		        <div
+		          id="myChart"
+		          :style="{ width: '530px', height: '177px' }"
+		        ></div>
+		      </div>
+		    </div>
+		    <div class="fx_box">
+		      <div class="title">
+		        <span
+		          :class="i == selectNav ? 'active' : ''"
+		          v-for="(item, i) in nav"
+		          :key="item"
+		          @click="changeNav(i)"
+		          >{{ item }}</span
+		        >
+		      </div>
+		      <div class="dt_fx" v-show="selectNav == 0">
+		        <div class="none" v-if="answer_list.length == 0">
+		          <div>
+		            <img src="../../assets/none.png" alt="" />
+		          </div>
+		          <div>暂无数据</div>
+		        </div>
+		        <li
+		          class="d-f j-s"
+		          :class="item == 1 ? 'active' : ''"
+		          v-for="(item, i) in answer_list"
+		          :key="i + 'a'"
+		        >
+		          <div class="analysis">
+		            <!-- <img :src="item.img" alt="" /> -->
+		
+		            <div v-html="item.que_tg" class="stems"></div>
+		            <p style="color: #499DF2;">
+		              知识点：
+		              <template v-for='(point,x) in item.que_points'>{{ point }} </template>
+		            </p>
+		            <div class="d-f">
+		
+		
+		              <span>答案：
+		              <span style="font-size:16px;color: #57C77C;font-weight: bolder;">{{item.que_std_ans}}</span>
+		              </span>
+		
+		            </div>
+		            <div class="d-f">
+		              <span>解析：{{item.que_jx}}</span>
+		              <!-- <span v-html=""></span> -->
+		            </div>
+		          </div>
+		
+		          <div>
+		            <div class="df_tj">
+		              <div class="df_tit">得分统计：</div>
+		              <div class="df_table">
+		                <li>
+		                  <span>答案</span>
+		                  <span v-for="(ite, i) in item.que_ans_range" :key="i + 'da'">{{
+		                    ite.ans
+		                  }}</span>
+		                </li>
+		                <li>
+		                  <span>人数</span>
+		                  <span v-for="(ite, i) in item.que_ans_range" :key="i + 'num'">{{
+		                    ite.num
+		                  }}</span>
+		                </li>
+		              </div>
+		            </div>
+		            <!-- <histogram></histogram> -->
+		            <div
+		              class="roseChart"
+		              :style="{
+		                width: '240px',
+		                height: '177px',
+		                marginTop: '15px',
+		              }"
+		            ></div>
+		          </div>
+		        </li>
+		             <div class="d-f j-s pagePagin" v-if="total>0">
+		        <el-pagination
+		        background
+		        layout="prev, pager, next"
+		        :total="total"
+		        :page-size="size"
+		        :current-page="page"
+		        @current-change="handleCurrentChange"
+		      >
+		      </el-pagination>
+		    </div>
+		      </div>
+		      <div class="xs_fx" v-show="selectNav == 1">
+		         <el-table :data="tableData" stripe style="width: 100%">
+				  <el-table-column prop="student_name" label="姓名">
+				  </el-table-column>
+				  <el-table-column prop="student_no" label="学号">
+				  </el-table-column>
+				  <el-table-column prop="total_score" label="得分">
+					  <template slot-scope="scope">
+						<div class="bold">{{scope.row.total_score}}</div>
+					  </template>
+					 </el-table-column>
+				  <el-table-column prop="objective_score" label="客观题">
+					  <template slot-scope="scope">
+						<div class="bold">{{scope.row.objective_score}}</div>
+					  </template>
+				  </el-table-column>
+				  <el-table-column prop="subjective_score" label="主观题">
+					 <template slot-scope="scope">
+						<div class="bold">{{scope.row.subjective_score}}</div>
+					  </template>
+				  </el-table-column>
+				  <el-table-column prop="rank" label="名次">
+					 <template slot-scope="scope">
+						<div class="bold">{{scope.row.rank}}</div>
+					  </template> </el-table-column>
+				  <el-table-column prop="age" label="失分题" width="240">
+					<template slot-scope="scope">
+						 <div v-if="scope.row.wrong_questions" class="wrong_question">
+							<span v-for="(ite,j) in scope.row.wrong_questions" :key="j+'kk'">{{ite}}</span>
+						  </div>
+					  </template>
+					 </el-table-column>
+				  <el-table-column prop="phone" label="操作">
+					   <template slot-scope="scope">
+				<el-button  @click="jump('/task/std_analysis?title='+title+'&id='+scope.row.student_id+'&task_id='+scope.row.task_id)" type="text" size="small">查看</el-button>
+			  </template>
+					 </el-table-column>
+				</el-table>
+		        <div class="cap_table" v-if="tableData.length == 0">
+		           <div class="none">
+		          <div>
+		            <img src="../../assets/none.png" alt="" />
+		          </div>
+		          <div>暂无数据</div>
+		        </div>
+		        </div>
+		        <div class="d-f j-s pagePagin" v-if="total>0">
+		        <el-pagination
+		        background
+		        layout="prev, pager, next"
+		        :total="total"
+		        :page-size="size"
+		        :current-page="page"
+		        @current-change="handleCurrentChange"
+		      >
+		      </el-pagination>
+		        </div>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+	</section>
+</template>
+
+
+
+<script>
+
+	export default {
+		data() {
+			return {
+				page:1,
+				size:10,
+				nav: ["答题分析", "学生作答分析"],
+				selectNav: 0,
+				title: "",
+				info: {},
+				id:'',
+				tableData: [],
+				total: 0,
+				score_table: [],
+				answer_list: [],
+				navKey:"",
+			}
+		},
+		watch: {
+		  answer_list: function () {
+		    //answer_list为需要监听的data
+		    var that = this;
+		    this.$nextTick(function () {
+		      //这里写方法
+		      that.drawRose();
+		    });
+		  },
+		},
+	  methods: {
+		//答题分析列表
+		getList(){
+		  var that = this;
+		  this.$api.getqueStatistic({task_id:this.id}).then((res)=>{
+			var res=res.data
+			if(res.code == 0){
+			  that.answer_list = res.data;
+			  that.total = res.total
+			}else{
+			  that.answer_list = [];
+			  that.total = 0;
+			  that.$message.warning(res.mess)
+			}
+		  });
+		},
+		//分页
+		handleCurrentChange(val) {
+		  this.page = val;
+		  if(this.selectNav==1){
+			this.getstudens_list()
+		  }else{
+			this.getList();
+		  }
+		},
+		//切换
+		changeNav(i) {
+		  this.selectNav = i;
+		  this.page = 1
+		  if (i == 1) {
+		  this.getstudens_list()
+		  }else{
+			this.getList();
+		  }
+		},
+		getstudens_list(){
+			var that = this;
+			const load = this.$loading({
+			lock: true,
+			text: "Loading",
+			spinner: "el-icon-loading",
+			background: "rgba(0, 0, 0, 0.7)",
+		  });
+			this.$api.getStdStatistic({task_id:this.id}).then((res) => {
+			  var res=res.data
+			  if (res.code == 0) {
+				that.tableData = res.data;
+				that.total = res.total;
+				 //关闭loading
+				load.close();
+			  }
+			});
+		},
+		drawRose() {
+		  var roseCharts = document.getElementsByClassName("roseChart");
+		  // console.log(roseCharts);
+		  var index = 0;
+		  for (var i = 0; i < this.answer_list.length; i++) {
+			index = i;
+			var xdata = [];
+			var ydata = [];
+			var maxNum = 1;
+			for (var j = 0; j < this.answer_list[i].que_ans_range.length; j++) {
+			  xdata.push(this.answer_list[i].que_ans_range[j].ans);
+			  ydata.push(this.answer_list[i].que_ans_range[j].num);
+			}
+			maxNum = Math.max(...ydata);
+			for (var q = 0; q < ydata.length; q++) {
+			  ydata[q] = {
+				value: ydata[q],
+				itemStyle: {
+				  color: ydata[q] >= 75 ? "#39D095" : "#508CEE",
+				},
+			  };
+			}
+			var itemChart = this.$echarts.init(roseCharts[index]);
+			// console.log(itemChart);
+			// 绘制图表
+			itemChart.setOption({
+			  tooltip: {
+				trigger: "axis",
+				axisPointer: {
+				  // 坐标轴指示器，坐标轴触发有效
+				  type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+				},
+			  },
+			  grid: {
+				left: "3%",
+				right: "0%",
+				bottom: "-2%",
+				containLabel: true,
+				height: 170,
+			  },
+			  xAxis: [
+				{
+				  type: "category",
+				  data: xdata,
+				  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: maxNum,
+				  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: ydata,
+				},
+			  ],
+			});
+		  }
+		},
+		jump(url) {
+		  if (url) {
+			this.$router.push(url);
+		  }
+		},
+		drawLine(xdata, ydata,maxNum) {
+		  let myChart = this.$echarts.init(document.getElementById("myChart"));
+		  // 绘制图表
+		  myChart.setOption({
+			tooltip: {
+			  trigger: "axis",
+			  axisPointer: {
+				// 坐标轴指示器，坐标轴触发有效
+				type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+			  },
+			},
+			grid: {
+			  left: "3%",
+			  right: "4%",
+			  bottom: "0",
+			  containLabel: true,
+			  height: 170,
+			},
+			xAxis: [
+			  {
+				type: "category",
+				data: xdata,
+				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: maxNum,
+				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: "40",
+				itemStyle: {
+				  normal: {
+					color: "#1EA1F5",
+				  },
+				},
+				data: ydata,
+			  },
+			],
+		  });
+		},
+	  },
+	created() {
+			this.title = this.$route.query.title;
+			this.id = this.$route.query.id;	
+			var that = this;
+			this.$api.getStatistic({task_id:this.id}).then((res) => {
+			  if (res.data.code == 0) {
+			    that.info = res.data.data;
+			    var xdata = [];
+			    var ydata = [];
+			    let data=res.data.data.score_range_list
+			    that.score_table = data;
+			    for (var i = 0; i < data.length; i++) {
+			      xdata.push(data[i].score_range);
+			      ydata.push(data[i].score_num);
+			    }
+			    this.drawLine(xdata, ydata,);
+			  }
+			});
+			this. getList()
+	}
+	}
+</script>
+
+<style scoped>
+	.content{
+		overflow: auto;
+	}
+	.rightContent{
+		padding: 20px;
+	}
+	.d-f {
+	    display: -webkit-box;
+	    display: -ms-flexbox;
+	    display: flex;
+	}
+	.j-s {
+	    -webkit-box-pack: justify;
+	    -ms-flex-pack: justify;
+	    justify-content: space-between;
+	}
+.wrong_question{
+  color: #0a9dff;
+}
+.wrong_question span::after{
+  content: '，';
+  display: inline-block;
+}
+.wrong_question span:last-child::after{
+content: '';
+}
+#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;
+  padding: 20px;
+  box-sizing: border-box;
+  margin: 20px 0;
+}
+.dt_fx > li img {
+  width: 100%;
+  height: 200px;
+}
+.df_tj .df_tit {
+  font-size: 13px;
+  color: #15213d;
+  margin-bottom: 15px;
+}
+.dt_fx > li > div:first-child {
+  width: 600px;
+}
+.dt_fx .analysis span:first-child {
+  font-size: 14px;
+  color: #333333;
+  line-height: 46px;
+}
+.dt_fx .analysis .stems{
+  min-height:185px
+}
+.dt_fx .analysis > div:nth-child(2) span:last-child {
+  font-size: 14px;
+  font-weight: bold;
+  color: #57c77c;
+  line-height: 46px;
+}
+.dt_fx .analysis > div:nth-child(3) span:last-child {
+  font-size: 13px;
+  color: #333333;
+}
+.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: 30px 0 18px 0;
+  font-size: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #666666;
+}
+.census_box,
+.census_cj {
+  background: #fff;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #f4f4f4;
+}
+.cj_echarts .title {
+  margin-left: 30px;
+}
+.census_cj .title {
+  font-size: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #1ea1f5;
+  margin-top: 10px;
+}
+.census_cj .cj_table {
+  width: 320px;
+  height: 175px;
+}
+.cj_table > div.tables_fd {
+  border: 1px solid #e0e0e0;
+  margin-top: 17px;
+}
+.cj_table > div.tables_fd > div {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+}
+.cj_table > div.tables_fd > div:last-child {
+  border: none;
+}
+.cj_table > div.tables_fd > div span {
+  width: 50%;
+  text-align: center;
+  line-height: 43px;
+  font-size: 13px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #999999;
+  border-right: 1px solid #e0e0e0;
+}
+.cj_table > div.tables_fd > div span:last-child {
+  border: none;
+  font-weight: bold;
+  color: #333;
+}
+.cj_table > div.tables_fd > div:first-child span:last-child {
+  color: #999999;
+  font-weight: 400;
+}
+.census_box .title {
+  font-size: 17px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #333333;
+}
+.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-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;
+}
+
+</style>

src/views/tasks/stdAnalysis.vue

@@ -0,0 +1,495 @@
+<template>
+	<section>
+		<div class="rightContent">
+		  <div class="breadcrumb" style="background-color: #fff;padding: 20px 10px 10px;">
+		  	<el-breadcrumb separator="/">
+		  		<el-breadcrumb-item>阅卷管理</el-breadcrumb-item>
+		  		<el-breadcrumb-item><a href="javascript:history.back(-1)">成绩分析</a></el-breadcrumb-item>
+		  		<el-breadcrumb-item>{{title}}</el-breadcrumb-item>
+		  	</el-breadcrumb>
+		  </div>
+		  <div class=" d-f j-s census_box">
+		    <div class="title">
+		        <div>{{ info.student_name }}</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>{{info.objective_score}}</span>
+		        </div>
+		      </li>
+		      <li>
+		        <div>
+		          <img src="../../assets/zy3.png" alt="" />
+		        </div>
+		        <div>
+		          <span>主观题</span>
+		          <span>{{info.subjective_score}}</span>
+		        </div>
+		      </li>
+		    </div>
+		  </div>
+		  <div class="fx_box">
+		      <div class="title">答题分析</div>
+		      <div class="none" v-if="list.length == 0">
+		        <div>
+		          <img src="../../assets/none.png" alt="" />
+		        </div>
+		        <div>暂无数据</div>
+		      </div>
+		    <div class="dt_fx" v-if="list.length > 0">
+		      <li
+		        class="d-f j-s"
+		        :class="item == 1 ? 'active' : ''"
+		        v-for="(item,i) in list"
+		        :key="i+'l'"
+		      >
+		         <div class="analysis">
+		          <div v-html="item.que_tg" class="stems"></div>
+		          <p style="color: #499DF2;margin: 15px 0;">
+		            知识点：
+		            <template v-for='(point,x) in item.que_points'>{{ point }} </template>
+		          </p>
+		          <div class="d-f">
+		
+		            <span>答案：
+		            <span style="font-size:16px;color: #57C77C;font-weight: bolder;">{{item.que_std_ans}}</span>
+		            </span>
+		          </div>
+		          <div class="d-f">
+		            <span>解析：{{item.que_jx}}</span>
+		            <!-- <span v-html=""></span> -->
+		          </div>
+		        </div>
+		        <div>
+		          <div class="df_tj">
+		            <div class="df_tit">得分统计：</div>
+		            <div class="df_table">
+		              <li>
+		                <span>答案</span>
+		           <span v-for="(ite, i) in item.que_ans_range" :key="i + 'da'">{{
+		                  ite.ans
+		                }}</span>
+		              </li>
+		              <li>
+		                <span>人数</span>
+		                  <span v-for="(ite, i) in item.que_ans_range" :key="i + 'num'">{{
+		                  ite.num
+		                }}</span>
+		              </li>
+		            </div>
+		          </div>
+		          <!-- <histogram></histogram> -->
+		          <div
+		            class="roseChart"
+		            :style="{
+		              width: '240px',
+		              height: '177px',
+		              marginTop: '15px',
+		            }"
+		          ></div>
+		        </div>
+		      </li>
+		       <div class="d-f j-s pagePagin" v-if="total>0">
+		      <el-pagination
+		      background
+		      layout="prev, pager, next"
+		      :total="total"
+		      :page-size="size"
+		      :current-page="page"
+		      @current-change="handleCurrentChange"
+		    >
+		    </el-pagination>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+	</section>
+</template>
+
+<script>
+	export default {
+	  data() {
+	    return {
+	       page:1,
+	      size:10,
+	      title: "",
+	      names: "",
+	      score:"",
+	      subjective:"",
+	      list:[],
+	      total:0,
+	      id:'',
+	      parent_id:"",
+	      info:{}
+	    };
+	  },
+	  created() {
+	    this.title = this.$route.query.title;
+	    this.names = this.$route.query.names;
+	    this.score = this.$route.query.score;
+	    this.id = this.$route.query.id
+	    this.task_id = this.$route.query.task_id
+	    // this.subjective = this.$route.query.subjective;
+	    this.get_list()
+	  },
+	   watch: {
+	    list: function () {//answer_list为需要监听的data
+	      var that = this;
+	      this.$nextTick(function () {
+	        //这里写方法
+	        that.drawRose();
+	      });
+	    },
+	  },
+	  methods: {
+	    handleCurrentChange(val) {
+	      this.page = val;
+	        this.get_list();
+	    },
+	    get_list(){
+	      var that = this;
+	       this.$api.getStudentansDetail({task_id:this.task_id,student_id:this.id}).then((res)=>{
+		    var res=res.data
+	        if(res.code == 0){
+	          this.info=res.data
+	         that.list = res.data.que_list
+			 
+	         that.total = res.total
+	        }
+	      });
+	    },
+	    drawRose() {
+	      var roseCharts = document.getElementsByClassName("roseChart");
+	      var index = 0;
+	      for (var i = 0; i < this.list.length; i++) {
+	        index = i;
+	        var xdata = [];
+	        var ydata = [];
+	        var maxNum = 1;
+	        for (var j = 0; j < this.list[i].que_ans_range.length; j++) {
+	          xdata.push(this.list[i].que_ans_range[j].ans);
+	          ydata.push(this.list[i].que_ans_range[j].num);
+	        }
+	            maxNum = Math.max(...ydata);
+	        for (var q = 0; q < ydata.length; q++) {
+	          ydata[q] = {
+	            value: ydata[q],
+	            itemStyle: {
+	              color: ydata[q] >= 75 ? "#39D095" : "#508CEE",
+	            },
+	          };
+	        }
+	        var itemChart = this.$echarts.init(roseCharts[index]);
+	        console.log(itemChart);
+	        // 绘制图表
+	        itemChart.setOption({
+	          tooltip: {
+	            trigger: "axis",
+	            axisPointer: {
+	              // 坐标轴指示器，坐标轴触发有效
+	              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+	            },
+	          },
+	          grid: {
+	            left: "0%",
+	            right: "0%",
+	            bottom: "-2%",
+	            containLabel: true,
+	            height: 170,
+	          },
+	          xAxis: [
+	            {
+	              type: "category",
+	              data: xdata,
+	              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: maxNum,
+	              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: ydata,
+	            },
+	          ],
+	        });
+	      }
+	    },
+	    jump(url) {
+	      if (url) {
+	        this.$router.push(url);
+	      }
+	    },
+	  },
+	};
+</script>
+
+<style scoped>
+	.d-f {
+	    display: -webkit-box;
+	    display: -ms-flexbox;
+	    display: flex;
+	}
+	.j-s {
+	    -webkit-box-pack: justify;
+	    -ms-flex-pack: justify;
+	    justify-content: space-between;
+	}
+#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;
+  min-height: 333px;
+  padding: 20px;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+}
+.dt_fx > li img {
+  width: 100%;
+  height: 200px;
+}
+.dt_fx .analysis span:first-child {
+  font-size: 14px;
+  color: #333333;
+  line-height: 46px;
+}
+.dt_fx .analysis > div:nth-child(2) span:last-child {
+  font-size: 14px;
+  font-weight: bold;
+  color: #57c77c;
+  line-height: 46px;
+}
+.dt_fx .analysis > div:nth-child(3) span:last-child {
+  font-size: 13px;
+  color: #333333;
+}
+.df_tj .df_tit {
+  font-size: 13px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #15213d;
+  margin-bottom: 15px;
+}
+.dt_fx > li > div:first-child {
+  width: 600px;
+}
+.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;
+}
+
+.operation span {
+  color: #0a9dff;
+  font-size: 14px;
+  cursor: pointer;
+}
+.container {
+  background: #f4f4f4;
+  /* margin-bottom: 40px; */
+  margin-top: 30px;
+}
+
+</style>

src/views/tasks/work_analysis.vue

@@ -69,7 +69,7 @@
 	      <el-button
 	        type="text"
 	        size="small"
-	        @click="jump('/answer_analysis?title=' + scope.row.name + '&id=' + scope.row.id)"
+	        @click="jump('/task/answer_analysis?title=' + scope.row.name + '&id=' + scope.row.id)"
 	        >查看</el-button
 	      >
 	    </template>