部分组件完成

components/bussiness/charts/chart-column.vue

 <!-- 饼图 -->
 <template>
   <section class="chart-pie">
-    <div id="chartColumnId" :style="{width: '100%', height: '320px'}"></div>
+    <div :id="id" :style="{width: '100%', height: '320px'}"></div>
   </section>
 </template>
 <script>
@@ -9,28 +9,24 @@ import { format } from "path";
 let vm = null;
 export default {
   props: {
-    pieData: {
-      type: Array,
-      default: () => [
-        { value: 335, name: "优秀证书" },
-        { value: 310, name: "及格证书" },
-        { value: 234, name: "未获证" }
-      ]
-    }
+    id: {
+      type: String,
+      default: "chartlineId"
+    },
   },
   data() {
     return {};
   },
   mounted() {
     vm = this;
-    this.drawPie();
+    this.drawColumn();
   },
   methods: {
     // 画
-    drawPie() {
+    drawColumn() {
       // 基于准备好的dom，初始化echarts实例
       let chartColumn = this.$echarts.init(
-        document.getElementById("chartColumnId")
+        document.getElementById(this.id)
       );
       // 绘制图表
       let options = {
@@ -147,13 +143,6 @@ export default {
         ]
       };
       chartColumn.setOption(options);
-    },
-    fmtLengend(name) {
-      console.log(name);
-      let item = this.pieData.find(item => {
-        return item.name === name;
-      });
-      return (item && item.value) || "";
     }
   }
 };

components/bussiness/course-times.vue

@@ -19,11 +19,11 @@ import ProcessBar from "@/components/common/pica-process";
 export default {
   props: {
     maxDuration: {
-      type: Number,
+      type: Number | String,
       default: 100
     },
     avgDuration: {
-      type: Number,
+      type: Number | String,
       default: 100
     }
   },

components/common/common-card.vue

+<!-- Tabs组件 -->
+<template>
+  <div class="common-card" :class="{'bg': needBG}">
+    <ul v-for="(item, index) in cardList" :key="index">
+      <li :class="{'bgf': needBG}">{{item.count}}{{item.unitName}}</li>
+      <li :class="{'bgf': needBG}">{{item.description}}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    cardList: {
+      type: Array,
+      default: () => [
+        {
+          count: 5,
+          unitName: "门",
+          description: "正式考试数"
+        },
+        {
+          count: 5,
+          unitName: "门",
+          description: "模拟考试数"
+        },
+        {
+          count: 60,
+          unitName: "道",
+          description: "所有考题数"
+        }
+      ]
+    },
+    needBG: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.common-card {
+  display: flex;
+  margin: 30px 15px;
+  &.bg {
+    margin: 20px 15px;
+    padding: 30px 15px;
+    background: linear-gradient(
+      180deg,
+      rgba(6, 190, 182, 1) 0%,
+      rgba(72, 177, 191, 1) 100%
+    );
+    box-shadow: 0px 3px 10px 0px rgba(56, 179, 157, 0.3);
+    border-radius: 6px;
+  }
+  ul {
+    flex: 1;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    li:nth-child(1) {
+      height: 24px;
+      line-height: 24px;
+      font-size: 24px;
+      font-weight: 700;
+      &.bgf {
+        color: #fff !important;
+      }
+      color: #373839;
+      margin-bottom: 12px;
+    }
+    li:nth-child(2) {
+      height: 14px;
+      line-height: 14px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #676869;
+      &.bgf {
+        color: rgba(255, 255, 255, 0.8) !important;
+      }
+    }
+  }
+}
+</style>

components/common/common-tabs.vue

@@ -12,13 +12,12 @@
     <span class="over"></span>
     <span class="border"></span>
   </div>
-
 </template>
 <script>
 export default {
   data() {
     return {
-      cIndex: 0
+      cIndex: 4
     };
   },
   props: {
@@ -29,7 +28,7 @@ export default {
         "人群分析",
         "课程分析",
         "考试分析",
-        "考试分析"
+        "学习效果分析"
       ]
     }
   },
@@ -52,30 +51,7 @@ export default {
   top: 0;
   left: 0;
   z-index: 1;
-  .over {
-    display: block;
-    position: absolute;
-    bottom: 0px;
-    left: 0;
-    width: 100%;
-    height: 6px;   
-    z-index: 2;
-    background: #fff;
-    // border-bottom: 1px solid red;
-  }
-  .border {
-    display: block;
-    width: 100%;
-    height: 1px;
-    bottom: -3px;
-    left: 0;
-    // padding-top: 6px;
-    border-bottom: 1px solid #F0F1F2;
-    position: absolute;
-    z-index: 2;
-  }
-}
-.common-tabs {
+  .common-tabs {
     white-space: nowrap;
     overflow-x: auto;
     // height: 30px;
@@ -98,8 +74,30 @@ export default {
         color: #449284;
         background: #e3efed;
       }
-
     }
     margin-top: 0;
+  }
+  .over {
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    z-index: 2;
+    background: #fff;
+    // border-bottom: 1px solid red;
+  }
+  .border {
+    display: block;
+    width: 100%;
+    height: 1px;
+    bottom: -3px;
+    left: 0;
+    // padding-top: 6px;
+    border-bottom: 1px solid #f0f1f2;
+    position: absolute;
+    z-index: 2;
+  }
 }
 </style>

components/common/pica-process.vue

@@ -8,7 +8,7 @@
 export default {
   props: {
     maxValue: {
-      type: Number,
+      type: Number | String,
       default: 100
     },
     value: {
@@ -16,7 +16,7 @@ export default {
       default: 100
     },
     valueDescWidth: {
-      type: Number,
+      type: Number | String,
       default: 120
     },
     barColor: {

pages/index.vue

 <template>
-  <div class="container">
+  <section class="container">
     <CommonHeader></CommonHeader>
     <CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect>
     <CommonTaps @tabClicked="tabClicked"></CommonTaps>
 
-    <section v-if="cIndex === 2">
+    <!-- 总体概况 -->
+    <article v-if="cIndex === 0">
       <CommonSwiperItem></CommonSwiperItem>
       <CommonTitle title="证书分布情况"></CommonTitle>
       <ChartPie></ChartPie>
@@ -18,36 +19,58 @@
       <CommonTitle title="完成天数排名"></CommonTitle>
       <RankingItemDays></RankingItemDays>
       <ShowAll></ShowAll>
-      <!-- <CommonSplitLine></CommonSplitLine> -->
       <CommonBottomInfo></CommonBottomInfo>
-    </section>
-    <section v-if="cIndex === 1">
-      <CommonTitle title="证书分布情况"></CommonTitle>
+    </article>
+
+    <!-- 人群分析 -->
+    <article v-if="cIndex === 1">
+      <CommonTitle title="人员学历情况"></CommonTitle>
       <ChartPie></ChartPie>
       <CommonSplitLine></CommonSplitLine>
-      <CommonTitle title="证书分布情况"></CommonTitle>
+      <CommonTitle title="人员职称情况"></CommonTitle>
       <ChartPie id="ssss"></ChartPie>
-    </section>
+    </article>
 
-    <section v-if="cIndex === 0" style="padding-top: 4px;">
-      <!-- <ProcessBar></ProcessBar>
-      <ProcessBar barColor="#FFB01A" value="80"></ProcessBar> -->
-      <CourseTimes maxDuration="200"></CourseTimes>
+    <!-- 课程分析 -->
+    <article v-if="cIndex === 2" style="padding-top: 8px;">
+      <CourseTimes maxDuration="27" avgDuration="16"></CourseTimes>
       <CommonSplitLine></CommonSplitLine>
       <CommonTitle title="课程列表"></CommonTitle>
       <RankingItemDays></RankingItemDays>
       <CommonBottomInfo></CommonBottomInfo>
-    </section>
+    </article>
+
+    <!-- 考试分析 -->
+    <article v-if="cIndex === 3" style="padding-top: 4px;">
+      <CommonCard></CommonCard>
+      <CommonSplitLine></CommonSplitLine>
+      <CommonTitle title="完成项目考试次数情况"></CommonTitle>
+      <ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical>
+      <CommonTitle title="完成项目考试分数情况"></CommonTitle>
+      <ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical>
+      <CommonTitle title="考试列表"></CommonTitle>
+      <RankingItemDays></RankingItemDays>
+      <CommonBottomInfo></CommonBottomInfo>
+    </article>
+
+    <!-- 学习效果分析 -->
+    <article v-if="cIndex === 4" style="padding-top: 4px;">
+      <CommonCard :needBG="needBG" :cardList="cardList"></CommonCard>
+      <CommonSplitLine></CommonSplitLine>
+      <CommonTitle title="不同学历完成项目前后正确率对比"></CommonTitle>
+      <ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical>
+      <CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
+      <ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical>
+      <CommonBottomInfo></CommonBottomInfo>
+    </article>
 
     <PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel"></PicaArea>
     <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
     <CommonLoading v-show="false"></CommonLoading>
-  </div>
+  </section>
 </template>
 
 <script>
-// import VePie from "v-charts/lib/pie";
-// import VeLine from "v-charts/lib/line";
 import CommonHeader from "@/components/common/common-header";
 import CommonTitle from "@/components/common/common-title";
 import CommonLoading from "@/components/common/common-loading";
@@ -60,18 +83,18 @@ import CommonBottomInfo from "@/components/common/common-bottom-info";
 import RankingItemDays from "@/components/bussiness/ranking-item-days";
 import ChartPie from "@/components/bussiness/charts/chart-pie";
 import ChartColumn from "@/components/bussiness/charts/chart-column";
+import ChartColumnVertical from "@/components/bussiness/charts/chart-column-vertical";
 import PicaArea from "@/components/common/pica-area";
 import PicaOrg from "@/components/common/pica-org";
 import CommonAreaSelect from "@/components/common/common-area-select";
-import ProcessBar from "@/components/common/pica-process"
-import CourseTimes from "@/components/bussiness/course-times"
+import ProcessBar from "@/components/common/pica-process";
+import CourseTimes from "@/components/bussiness/course-times";
+import CommonCard from "@/components/common/common-card";
 
 export default {
   components: {
     CommonHeader,
     CommonTitle,
-    // VePie,
-    // VeLine,
     CommonLoading,
     CommonTaps,
     CommonSwiperItem,
@@ -86,7 +109,9 @@ export default {
     PicaOrg,
     CommonAreaSelect,
     ProcessBar,
-    CourseTimes
+    CourseTimes,
+    CommonCard,
+    ChartColumnVertical
   },
   data() {
     return {
@@ -117,7 +142,21 @@ export default {
       },
       isShowArea: false,
       isShowOrg: false,
-      cIndex: 0
+      cIndex: 4,
+      colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"],
+      needBG: true,
+      cardList: [
+        {
+          count: 65,
+          unitName: "%",
+          description: "培训前正确率"
+        },
+        {
+          count: 80,
+          unitName: "%",
+          description: "培训后正确率"
+        }
+      ]
     };
   },
   async asyncData() {
@@ -131,7 +170,7 @@ export default {
   },
   methods: {
     tabClicked(index) {
-      this.cIndex = index
+      this.cIndex = index;
     },
     areaConfirm(selData) {
       console.log(selData);