|
|
@@ -30,11 +30,11 @@
|
|
|
<el-row :gutter="2">
|
|
|
<el-col :span="10" class="chart-border">
|
|
|
<div class="chart-header">考试进度情况</div>
|
|
|
- <examSummaryPie :examId="examId"></examSummaryPie>
|
|
|
+ <div><v-chart :options="pieOptions" /></div>
|
|
|
</el-col>
|
|
|
<el-col :span="14" class="chart-border">
|
|
|
<div class="chart-header">课程完成进度TOP5</div>
|
|
|
- <examSummaryLine :examId="examId"></examSummaryLine>
|
|
|
+ <div><v-chart :options="lineOptions" /></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row style="margin-top:10px;">
|
|
|
@@ -176,10 +176,17 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import { mapState } from "vuex";
|
|
|
-import examSummaryPie from "../component/examSummaryPie.vue";
|
|
|
-import examSummaryLine from "../component/examSummaryLine.vue";
|
|
|
+import ECharts from "vue-echarts/components/ECharts";
|
|
|
+import "echarts/lib/component/legend";
|
|
|
+import "echarts/lib/component/legendScroll";
|
|
|
+import "echarts/lib/chart/pie";
|
|
|
+import "echarts/lib/component/polar";
|
|
|
+import "echarts/lib/component/tooltip";
|
|
|
+import "echarts/lib/component/title";
|
|
|
+import "echarts/lib/chart/bar";
|
|
|
+import "echarts/lib/chart/line";
|
|
|
export default {
|
|
|
- components: { examSummaryPie, examSummaryLine },
|
|
|
+ components: { "v-chart": ECharts },
|
|
|
data() {
|
|
|
return {
|
|
|
examList: [],
|
|
|
@@ -190,7 +197,9 @@ export default {
|
|
|
courseId: "",
|
|
|
activeName: "first",
|
|
|
orgExamInfos: [],
|
|
|
- courseProgressList: []
|
|
|
+ courseProgressList: [],
|
|
|
+ lineOptions: {},
|
|
|
+ pieOptions: {}
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -203,7 +212,7 @@ export default {
|
|
|
}
|
|
|
this.$http
|
|
|
.get("/api/ecs_exam_work/exam/queryByNameLike", {
|
|
|
- params: { name: examName }
|
|
|
+ params: { name: examName, examTypes: "ONLINE#OFFLINE" }
|
|
|
})
|
|
|
.then(response => {
|
|
|
this.examList = response.data;
|
|
|
@@ -256,6 +265,7 @@ export default {
|
|
|
.then(response => {
|
|
|
if (response.data && response.data.length > 0) {
|
|
|
this.courseProgressList = response.data;
|
|
|
+ this.buildLine(response.data);
|
|
|
} else {
|
|
|
this.courseProgressList = [];
|
|
|
}
|
|
|
@@ -281,9 +291,184 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
changeExam() {
|
|
|
+ this.getPieData();
|
|
|
this.getCourses();
|
|
|
this.getOrgExamInfos();
|
|
|
this.getCourseProgress();
|
|
|
+ },
|
|
|
+ getPieData() {
|
|
|
+ if (!this.examId) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ "/api/ecs_oe_admin/exam/student/statistic/by/finished?examId=" +
|
|
|
+ this.examId
|
|
|
+ )
|
|
|
+ .then(response => {
|
|
|
+ var resp = response.data;
|
|
|
+ var optionData = {
|
|
|
+ title: "考试人次:" + (resp.finished + resp.unFinished),
|
|
|
+ legendData: [
|
|
|
+ "未完成:" + resp.unFinished,
|
|
|
+ "已完成:" + resp.finished
|
|
|
+ ],
|
|
|
+ seriesData: [
|
|
|
+ { name: "未完成:" + resp.unFinished, value: resp.unFinished },
|
|
|
+ { name: "已完成:" + resp.finished, value: resp.finished }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.buildPieOptions(optionData);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ buildPieOptions(data) {
|
|
|
+ var colors = ["#7CB5EC", "#FE8463"];
|
|
|
+ this.pieOptions = {
|
|
|
+ color: colors,
|
|
|
+ title: {
|
|
|
+ text: data.title,
|
|
|
+ subtext: "",
|
|
|
+ x: "left"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: "{b}人次<br/>占比:{d}%"
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ type: "scroll",
|
|
|
+ orient: "vertical",
|
|
|
+ right: 200,
|
|
|
+ top: 30,
|
|
|
+ data: data.legendData
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: "50%",
|
|
|
+ center: ["30%", "60%"],
|
|
|
+ data: data.seriesData,
|
|
|
+ itemStyle: {
|
|
|
+ emphasis: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ buildLine(courseProgressList) {
|
|
|
+ courseProgressList.sort(function(a, b) {
|
|
|
+ if (b["completedProportion"] != a["completedProportion"]) {
|
|
|
+ return b["completedProportion"] - a["completedProportion"];
|
|
|
+ } else if (b["allNum"] != a["allNum"]) {
|
|
|
+ return b["allNum"] - a["allNum"];
|
|
|
+ } else {
|
|
|
+ return b["completedNum"] - a["completedNum"];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ var campusCount = 5;
|
|
|
+ var courseProgressDataList = [];
|
|
|
+ //找出5个完成比例最高的
|
|
|
+ if (courseProgressList.length >= campusCount) {
|
|
|
+ courseProgressDataList = courseProgressList.slice(0, campusCount);
|
|
|
+ } else {
|
|
|
+ courseProgressDataList = courseProgressList;
|
|
|
+ }
|
|
|
+ var xAxisData = [];
|
|
|
+ var seriesBar = {
|
|
|
+ name: "计划数",
|
|
|
+ type: "bar",
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ var seriesLine1 = {
|
|
|
+ name: "完成数",
|
|
|
+ type: "line",
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ var seriesLine2 = {
|
|
|
+ name: "完成比(%)",
|
|
|
+ type: "line",
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ var yAxis_maxScale1 = 0;
|
|
|
+ for (var i = 0; i < courseProgressDataList.length; i++) {
|
|
|
+ xAxisData.push(courseProgressDataList[i].courseName);
|
|
|
+ seriesBar.data.push(courseProgressDataList[i].allNum);
|
|
|
+ seriesLine1.data.push(courseProgressDataList[i].completedNum);
|
|
|
+ seriesLine2.data.push(courseProgressDataList[i].completedProportion);
|
|
|
+ if (courseProgressDataList[i].allNum > yAxis_maxScale1) {
|
|
|
+ yAxis_maxScale1 = courseProgressDataList[i].allNum;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var optionData = {
|
|
|
+ legendData: ["计划数", "完成数", "完成比(%)"],
|
|
|
+ xAxis: { data: xAxisData },
|
|
|
+ series: [seriesBar, seriesLine1, seriesLine2],
|
|
|
+ yAxis_maxScale1
|
|
|
+ };
|
|
|
+ this.buildLineOptions(optionData);
|
|
|
+ },
|
|
|
+ buildLineOptions(optionData) {
|
|
|
+ var colors = ["#FE8463", "#66CCFF", "#675bba"];
|
|
|
+ this.lineOptions = {
|
|
|
+ color: colors,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ crossStyle: {
|
|
|
+ color: "#999"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ dataView: { show: true, readOnly: false },
|
|
|
+ magicType: { show: true, type: ["line", "bar"] },
|
|
|
+ restore: { show: true },
|
|
|
+ saveAsImage: { show: true }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: optionData.legendData
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: optionData.xAxis.data,
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "人次",
|
|
|
+ min: 0,
|
|
|
+ max: optionData.yAxis_maxScale1,
|
|
|
+ interval: 10000,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} "
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "完成比例",
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ interval: 20,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} %"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: optionData.series
|
|
|
+ };
|
|
|
}
|
|
|
},
|
|
|
created() {
|
chenken