考试分析

src/utils/learning/chartData.js

@@ -54,7 +54,7 @@ export function recordOption() {
         },
       },
       backgroundColor: 'rgba(0,0,0,0.7)',
-      formatter: function(params) {
+      formatter: function (params) {
         let relVal = params[0].name + "人数：";
         let value = 0;
         for (let i = 0, l = params.length; i < l; i++) {
@@ -65,9 +65,9 @@ export function recordOption() {
         divList[0] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
         divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
         divList[2] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-        for (let j = params.length - 1 ; j >= 0; j--) {
-          relVal += 
-            "<br/>" + divList[j%3] +
+        for (let j = params.length - 1; j >= 0; j--) {
+          relVal +=
+            "<br/>" + divList[j % 3] +
             params[j].seriesName +
             "占比： " +
             (
@@ -79,7 +79,7 @@ export function recordOption() {
         return relVal;
       }
     },
-    color: ['#FFB01B','#39AF9A', '#5D7092'],
+    color: ['#FFB01B', '#39AF9A', '#5D7092'],
     legend: {
       data: ["未获证人数", "获优秀人数", "获及格人数"]
     },
@@ -156,7 +156,7 @@ export function certificateOption() {
         }
       },
       backgroundColor: 'rgba(0,0,0,0.7)',
-      formatter: function(params) {
+      formatter: function (params) {
         let relVal = "";
         let divList = [];
         divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
@@ -173,7 +173,7 @@ export function certificateOption() {
         return relVal;
       }
     },
-    color: ['#5D7092','#FFB01B', '#559A99'],
+    color: ['#5D7092', '#FFB01B', '#559A99'],
     dataZoom: {
       show: true,
       start: 0,
@@ -472,4 +472,110 @@ export function durationOption() {
     ]
   };
   return option;
+}
+
+export function educationEffect(xAxisData, seriesBefore ,seriesAfter) {
+  let option = {
+    title: {
+      text: ""
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    color: ["#5D7092", "#FFB01B"],
+    legend: {
+      data: ["项目前总正确率", "项目后总正确率"]
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      data: xAxisData
+    },
+    yAxis: {
+      min: 0,
+      max: 100,
+      type: "value",
+      axisLabel: {
+        formatter: "{value} %"
+      }
+    },
+    series: [
+      {
+        name: "项目前总正确率",
+        type: "bar",
+        barWidth: 10,
+        data: seriesBefore,
+      },
+      {
+        name: "项目后总正确率",
+        type: "bar",
+        barWidth: 10,
+        data: seriesAfter,
+      }
+    ]
+  };
+  return option;
+}
+
+export function knowledgeEffect(xAxisData, seriesBefore ,seriesAfter) {
+  let option = {
+    title: {
+      text: ""
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    color: ["#5D7092", "#FFB01B"],
+    legend: {
+      data: ["培训前正确率", "培训后正确率"]
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        interval: 0,
+        rotate: 45
+      },
+      type: "category",
+      data: xAxisData,
+    },
+    yAxis: {
+      min: 0,
+      max: 100,
+      type: "value",
+      axisLabel: {
+        formatter: "{value} %"
+      }
+    },
+    series: [
+      {
+        name: "培训前正确率",
+        type: "bar",
+        barWidth: 10,
+        data: seriesBefore,
+      },
+      {
+        name: "培训后正确率",
+        type: "bar",
+        barWidth: 10,
+        data: seriesAfter
+      }
+    ]
+  };
+  return option;
 }
\ No newline at end of file

src/views/learning/item-learning-effect.vue

@@ -3,12 +3,12 @@
     <div class="box-list">
       <div v-for="(item , index) in cardData" :key="index" class="box">
         <el-card class="box-card">
-          <el-tooltip class="item-tool" placement="bottom-end" effect="light">
+          <!-- <el-tooltip class="item-tool" placement="bottom-end" effect="light">
             <div slot="content">
               <p v-for="text in item.content">{{ text }}</p>
             </div>
             <i class="el-icon-question notice"></i>
-          </el-tooltip>
+          </el-tooltip> -->
           <div class="left-content">
             <p class="title">{{ item.title }}</p>
             <p class="value">{{ item.value }}</p>
@@ -53,6 +53,7 @@ export default {
   },
   created() {
     vm = this;
+    vm.projectId = vm.getUrlSearch(window.location.href, "id");
   },
   mounted() {
     commonUtil.resizeHeight();
@@ -89,8 +90,8 @@ export default {
         if (res.code == "000000") {
           vm.initCard(res.data);
           setTimeout(function() {
-            vm.setEducation();
-            vm.setLearning();
+            vm.setEducation(res.data.educationEffectList);
+            vm.setLearning(res.data.knowledgeEffectList);
           }, 20);
         }
       });
@@ -106,115 +107,36 @@ export default {
           title: "培训前后正确率"
         }
       ];
-      cardData[0] = data.befortRate + "%";
-      cardData[1] = data.afterRate + "%";
+      cardData[0].value = data.beforeRate*100 + "%";
+      cardData[1].value = data.afterRate*100 + "%";
+      vm.cardData = cardData;
     },
-    setEducation() {
+    setEducation(data) {
       let myChart = echarts.init(this.$refs.education);
-      let option = {
-        title: {
-          text: ""
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        },
-        color: ["#5D7092", "#FFB01B"],
-        legend: {
-          data: ["项目前总正确率", "项目后总正确率"]
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: {
-          type: "category",
-          data: ["本科", "大专", "中专及以下", "硕士", "博士", "其他"]
-        },
-        yAxis: {
-          min: 0,
-          max: 100,
-          type: "value",
-          axisLabel: {
-            formatter: "{value} %"
-          }
-        },
-        series: [
-          {
-            name: "项目前总正确率",
-            type: "bar",
-            barWidth: 10,
-            data: [45, 45, 34, 34, 4, 8]
-          },
-          {
-            name: "项目后总正确率",
-            type: "bar",
-            barWidth: 10,
-            data: [70, 66, 67, 67, 24, 24]
-          }
-        ]
-      };
+      let xAxisData = [];
+      let seriesBefore = [];
+      let seriesAfter = [];
+      for(let i = 0; i < data.length ; i++) {
+        xAxisData.push(data[i].classifyName);
+        seriesBefore.push(data[i].beforeRate*100);
+        seriesAfter.push(data[i].afterRate*100);
+      }
+      let option = chartData.educationEffect(xAxisData, seriesBefore ,seriesAfter);
       myChart.setOption(option);
       vm.echartsData.chart1 = myChart;
       vm.updateResize();
     },
-    setLearning() {
+    setLearning(data) {
       let myChart = echarts.init(this.$refs.learning);
-      let option = {
-        title: {
-          text: ""
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        },
-        color: ["#5D7092", "#FFB01B"],
-        legend: {
-          data: ["培训前正确率", "培训后正确率"]
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: {
-          axisLabel: {
-            interval: 0,
-            rotate: 45
-          },
-          type: "category",
-          data: ["推荐联合用药方案"]
-        },
-        yAxis: {
-          min: 0,
-          max: 100,
-          type: "value",
-          axisLabel: {
-            formatter: "{value} %"
-          }
-        },
-        series: [
-          {
-            name: "培训前正确率",
-            type: "bar",
-            barWidth: 10,
-            data: [45]
-          },
-          {
-            name: "培训后正确率",
-            type: "bar",
-            barWidth: 10,
-            data: [81]
-          }
-        ]
-      };
+      let xAxisData = [];
+      let seriesBefore = [];
+      let seriesAfter = [];
+      for(let i = 0; i < data.length ; i++) {
+        xAxisData.push(data[i].classifyName);
+        seriesBefore.push(data[i].beforeRate*100);
+        seriesAfter.push(data[i].afterRate*100);
+      }
+      let option = chartData.knowledgeEffect(xAxisData, seriesBefore ,seriesAfter);
       myChart.setOption(option);
       vm.echartsData.chart2 = myChart;
       vm.updateResize();
@@ -228,6 +150,63 @@ export default {
   background: #fff;
   overflow: hidden;
   padding: 10px;
+  .box-list {
+    position: relative;
+    // width: 100%;
+    height: 110px;
+    .box-card {
+      position: relative;
+      background-color: #e3efed;
+      color: #449284;
+      width: 48%;
+      margin-right: 1%;
+      height: 110px;
+      float: left;
+      .notice {
+        position: absolute;
+        z-index: 999;
+        top: 21px;
+        right: 14px;
+        width: 16px;
+        height: 16px;
+      }
+      .el-card__header {
+        border-bottom-width: 0;
+      }
+      .el-card__body {
+        padding: 0px;
+      }
+      .left-content {
+        position: relative;
+        float: left;
+        width: 33%;
+        height: 110px;
+        text-align: left;
+        padding: 23px 0 0 20px;
+        .title {
+          font-size: 14px;
+          height: 14px;
+          line-height: 14px;
+        }
+        .value {
+          margin-top: 20px;
+          height: 22px;
+          font-size: 30px;
+          line-height: 22px;
+          font-weight: 500;
+        }
+      }
+      .vertical {
+        position: absolute;
+        left: 34%;
+        float: left;
+        margin-top: 23px;
+        width:1px;
+        height:57px;
+        background-color: #C1D8D4;
+      }
+    }
+  }
   .chart {
     position: relative;
     margin: 20px auto 0 auto;