supermarkpp/src/views/tasks/work_analysis.vue

<template>
  <section class="content">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="/">阅卷管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>成绩分析</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :model="params" label-width="80px" class="filter-form" :inine="true">
      <el-row>
        <el-col :span="4">
          <el-form-item label="学校">
            <el-select size="mini" v-model="params.school_id">
              <el-option label="人大附中" value="人大附中">人大附中</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="年级" v-model="params.grade_id">
            <el-select v-model="params.school_id" size="mini">
              <el-option label="高三一班" value="高三一班">高三一班</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="10" style="margin-left: 10px">
            <el-button type="primary" @click="get_list()" size="mini">筛选</el-button>
            <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
	<el-table :data="tableData" stripe style="width: 100%" height="65vh">
	  <el-table-column prop="name" label="作业名称"> </el-table-column>
	  <el-table-column prop="score" label="满分">
	    <template slot-scope="scope">
	      <div class="bold">{{ scope.row.full_score }}</div>
	    </template>
	  </el-table-column>
	  <el-table-column prop="max_score" label="最高分">
	    <template slot-scope="scope">
	      <div class="bold">{{ scope.row.max_score }}</div>
	    </template>
	  </el-table-column>
	  <el-table-column prop="avg_score" label="平均分">
	    <template slot-scope="scope">
	      <div class="bold">{{ scope.row.avg_score }}</div>
	    </template>
	  </el-table-column>
	  <el-table-column prop="pass_rate" label="及格率">
	    <template slot-scope="scope">
	      <div class="bold">
	        {{ scope.row.pass_rate }}
	      </div>
	    </template>
	  </el-table-column>
	  <el-table-column prop="phone" label="答题人数">
	    <template slot-scope="scope">
	       <div style="color: #0a9dff">
	        <span>{{ scope.row.marked_students }}/</span>
	        <span>{{ scope.row.total_students }}</span>
	      </div>
	    </template>
	  </el-table-column>
	  <el-table-column prop="ctime" label="上传时间" width="180">
	  </el-table-column>
	  <el-table-column prop="phone" label="操作" width="80">
	    <template slot-scope="scope">
	      <el-button
	        type="text"
	        size="small"
	        @click="jump('/task/answer_analysis?title=' + scope.row.name + '&id=' + scope.row.id)"
	        >查看</el-button
	      >
	    </template>
	  </el-table-column>
	</el-table>
	
    <Page ref="pageButton" :current="params.page" :page_size="params.page_size" :total="total" @pageChange="gopage" />
 
  </section>
</template>
<script>
  import Page from "../../components/Page";
  export default {
    components: {
      Page,
    },
    data() {
      return {
		  params: {
		    cid: '',
		    year: "",
		    page: 1,
		    page_size: 10,
		    mtype: "work",
		  },
		  value1: "",
		  yearL: [],
		  classL: [],
		  tableData: [],
		  total: 0,
		  navKey: 2,
      };
    },
    methods: {
		gopage(size) {
		  if (size) {
		    this.params.page_size = size;
		  }
		  this.params.page = this.$refs.pageButton.page;
		  this.get_list();
		},
		//筛选
		nav_change() {
		  // this.getList();
		},
		//折线图
		getList() {
		  var obj = {};
		  var that = this;
		  if (this.params.year) {
		    obj.year = this.params.year;
		  }
		  obj.cid = this.params.cid?obj.cid=this.params.cid:0;
		  this.$api.getStatistic(obj).then((res) => {
		    if (res.errcode == 0) {
		      if (that.navKey == 2) {
		        this.drawLine(
		          res.data.avg_score.x,
		          res.data.score.y,
		          res.data.high_score.y,
		          res.data.avg_score.y,
		          res.data.low_scores.y
		        );
		      }
		    }else{
		      that.$message.warning(res.mess)
		    }
		  });
		  if (!this.params.year) {
		    delete this.params.year;
		  }
		  this.get_list(this.params);
		},
		jump(url) {
		  if (url) {
		    this.$router.push(url);
		  }
		},
		get_list(obj1) {
		  // if (!obj1.cid) {
		  //   delete obj1.cid;
		  // }
		  this.$api.getMarkTaskList(this.params).then((res) => {
		    if (res.data.code == 0) {
		      this.tableData = res.data.data.list;
		      this.total = res.data.data.total;
		    }
		  });
		},
		//分页
		handleCurrentChange(val) {
		  this.params.page = val;
		  this.getList();
		},
		drawLine(xdata, ydata1, ydata2, ydata3, ydata4) {
		  let myChart = this.$echarts.init(document.getElementById("myChart"));
		  // 绘制图表
		  myChart.setOption({
		    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
		    tooltip: {
		      trigger: "axis",
		      axisPointer: {
		        type: "line",
		        label: {
		          backgroundColor: "#6a7985",
		        },
		      },
		    },
		    title: {
		      text: "作业分数分布",
		      padding: [2, 0, 0, 21],
		    },
		    grid: {
		      left: "0%",
		      right: "4%",
		      bottom: "3%",
		      containLabel: true,
		    },
		    xAxis: [
		      {
		        type: "category",
		        boundaryGap: false,
		        data: xdata,
		        axisLine: {
		          lineStyle: {
		            color: "#D9D9D9",
		          },
		        },
		        axisLabel: {
		          //x轴文字的配置
		          show: true,
		          textStyle: {
		            color: "#999",
		            fontSize: 13,
		            align: "center",
		          },
		        },
		        axisTick: {
		          show: false,
		        },
		      },
		    ],
		    yAxis: [
		      {
		        type: "value",
		        axisLabel: {
		          formatter: "{value}",
		          textStyle: {
		            color: "#999",
		          },
		        },
		        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",
		          },
		        },
		      },
		    ],
		    legend: {
		      // orient: 'vertical',
		      left: "right",
		      top: "top",
		      padding: [5, 40, 0, 0],
		      data: ["满分", "最高分", "平均分", "最低分"],
		    },
		    series: [
		      {
		        name: "满分",
		        type: "line",
		        lineStyle: {
		          width: 0,
		          color: "#eee",
		        },
		        showSymbol: false,
		        itemStyle: {
		          normal: {
		            color: "#1839E0",
		            lineStyle: {
		              width: 2,
		              color: "#1839E0",
		              type: "dotted", //'dotted'虚线 'solid'实线
		            },
		          },
		        },
		        smooth: true,
		        data: ydata1,
		      },
		      {
		        name: "最高分",
		        type: "line",
		        showSymbol: false,
		        itemStyle: {
		          normal: {
		            color: "#FA0A2F", //改变折线点的颜色
		          },
		        },
		        smooth: true,
		        data: ydata2,
		      },
		      {
		        name: "平均分",
		        type: "line",
		        showSymbol: false,
		        itemStyle: {
		          normal: {
		            color: "#FFB95F", //改变折线点的颜色
		          },
		        },
		        smooth: true,
		        data: ydata3,
		      },
		      {
		        name: "最低分",
		        type: "line",
		        showSymbol: false,
		        itemStyle: {
		          normal: {
		            color: "#26C999", //改变折线点的颜色
		          },
		        },
		        smooth: true,
		        data: ydata4,
		      },
		    ],
		  });
		},
    },
    created() {
     this.get_list();

    },
  };
</script>



<style>
.prosss_box .el-progress.el-progress--line {
  width: 88px;
  margin: auto 5px auto 0;
}
.prosss_box .el-progress-bar {
  padding-right: 0;
}
.prosss_box .el-progress__text {
  display: none;
}
.prosss_box{
	display:flex;
}
</style>