完成教育盘点的学历、学位以及学校

src/views/person/person_review.vue

@@ -45,19 +45,19 @@
       </div>
 
       <div class="slide">
-        <div class="section-title region-title">员工地域统计</div>
+        <div class="tab-title">员工地域统计</div>
         <div class="section-body">
           <div class="sbody-left">
             <el-tabs
               type="border-card"
               class="tab-card"
-              @tab-click="handleTabClick"
+              @tab-click="handleRegionTabClick"
             >
               <el-tab-pane label="省份"
-                ><div id="pic_region" class="pic pic-region"></div
+                ><div id="pic_region" class="pic tab-pic"></div
               ></el-tab-pane>
               <el-tab-pane label="城市"
-                ><div id="pic_region_city" class="pic pic-region"></div
+                ><div id="pic_region_city" class="pic tab-pic"></div
               ></el-tab-pane>
             </el-tabs>
           </div>
@@ -75,11 +75,29 @@
       </div>
 
       <div class="slide">
-        <div class="section-title">员工学历统计</div>
+        <div class="tab-title">员工学历统计</div>
         <div class="section-body">
-          <div class="sbody-left"></div>
+          <div class="sbody-left">
+            <el-tabs
+              type="border-card"
+              class="tab-card"
+              @tab-click="handleEduTabClick"
+            >
+              <el-tab-pane label="全日制"
+                ><div id="pic_full_edu" class="pic tab-pic"></div
+              ></el-tab-pane>
+              <el-tab-pane label="在职"
+                ><div id="pic_work_edu" class="pic tab-pic"></div
+              ></el-tab-pane>
+            </el-tabs>
+          </div>
           <div class="sbody-right">
-            <p></p>
+            <p>
+              全日制学历中，大学本科占比最多，达31.2%。其次是高中以及中专学历。
+            </p>
+            <p>
+              厂内累计342人在职提升学历，将学历提升到大专的人最多，占比达77.2%
+            </p>
           </div>
         </div>
       </div>
@@ -87,8 +105,13 @@
       <div class="slide">
         <div class="section-title">员工学位统计</div>
         <div class="section-body">
-          <div class="sbody-left"></div>
+          <div class="sbody-left">
-          <div class="sbody-right"></div>
+            <div id="pic_degree" class="pic"></div>
+          </div>
+          <div class="sbody-right">
+            <p>全日制学位数量远大于在职学位数量。</p>
+            <p>全日制学位中，学士数量远大于硕士，大约是其7倍。</p>
+          </div>
         </div>
       </div>
 
@@ -101,10 +124,36 @@
       </div>
 
       <div class="slide">
-        <div class="section-title">员工学校统计</div>
+        <div class="tab-title">员工学校统计</div>
         <div class="section-body">
-          <div class="sbody-left"></div>
+          <div class="sbody-left2">
-          <div class="sbody-right"></div>
+            <el-tabs
+              type="border-card"
+              class="tab-card2"
+              @tab-click="handleSchoolTabClick"
+            >
+              <el-tab-pane label="全日制">
+                <div id="pic_full_school" class="pic2"></div>
+              </el-tab-pane>
+              <el-tab-pane label="在职">
+                <div id="pic_work_school" class="pic2"></div>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+          <div class="sbody-right">
+            <p class="p2">
+              全日制教育中，毕业于湖北民族大学的员工最多，其次是湖北恩施学院、湖北工业大学。
+            </p>
+            <p class="p2">
+              全日制教育中，26位员工毕业于“211”高校，9位员工毕业于“985”高校。
+            </p>
+            <p class="p2">
+              在职教育中，毕业于恩施职业技术学院的员工醉倒，其次是中央广播电视大学、湖北广播电视大学。
+            </p>
+            <p class="p2">
+              在职教育中，39位员工毕业于“211”高校，10位员工毕业于“985”高校。
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -126,10 +175,12 @@ import "@/assets/js/jquery.fullPage.min.js";
 
 import * as echarts from "echarts";
 import * as personApi from "@/api/person";
+import { options } from "runjs";
 export default {
   name: "PersonReview",
   data() {
     return {
+      // 人口特征
       genderData: [],
       ageData: {},
       nationData: [],
@@ -141,6 +192,18 @@ export default {
       nationChart: null,
       regionChart: null,
       regionCityChart: null,
+
+      // 教育
+      fullEduData: [],
+      workEduData: {},
+      degreeData: [],
+      fullSchoolData: {},
+      workSchoolData: {},
+      schoolCategory: ["211", "985"],
+
+      fullEduChart: null,
+      workEduChart: null,
+      degreeChart: null,
     };
   },
   computed: {
@@ -176,7 +239,6 @@ export default {
       return (manNum / womanNum).toFixed(1);
     },
   },
-  created() {},
   mounted() {
     $(() => {
       $("#full_page").fullpage({
@@ -206,6 +268,20 @@ export default {
               // 地域 不播放动画
               // this.showRegionPic()
             }
+          } else if (origin == 2) {
+            // 教育特征
+            if (destination == 1) {
+              // 学历
+              this.showFullEduPie();
+            } else if (destination == 2) {
+              // 学位
+              this.showDegreeBar();
+            } else if (destination == 3) {
+              // 专业
+            } else if (destination == 4) {
+              // 学校
+              this.showFullSchoolPie();
+            }
           }
         },
       });
@@ -222,6 +298,16 @@ export default {
     this.regionChart = echarts.init(chartDom);
     chartDom = document.getElementById("pic_region_city");
     this.regionCityChart = echarts.init(chartDom);
+    chartDom = document.getElementById("pic_full_edu");
+    this.fullEduChart = echarts.init(chartDom);
+    chartDom = document.getElementById("pic_work_edu");
+    this.workEduChart = echarts.init(chartDom);
+    chartDom = document.getElementById("pic_degree");
+    this.degreeChart = echarts.init(chartDom);
+    chartDom = document.getElementById("pic_full_school");
+    this.fullSchoolChart = echarts.init(chartDom);
+    chartDom = document.getElementById("pic_work_school");
+    this.workSchoolChart = echarts.init(chartDom);
 
     // 请求人口数据
     personApi.getReviewPopulation().then(
@@ -325,19 +411,87 @@ export default {
     // 请求教育数据
     personApi.getReviewEducation().then(
       (res) => {
-        console.log(res)
+        let resData = res.data;
+        // 数据格式转换
+        // 全日制学历
+        let fullEduData = resData["全日制学历"];
+        let tempArr = [];
+        let nameOrder = ["初中", "中专", "高中", "大专", "大学", "研究生"];
+        for (let name of nameOrder) {
+          tempArr.push({ name: name, value: fullEduData[name] });
+        }
+        this.fullEduData = tempArr;
+        // 在职学历
+        let workEduData = resData["在职学历"];
+        tempArr = [];
+        nameOrder = ["中专", "高中", "大专", "大学", "研究生"];
+        for (let name of nameOrder) {
+          tempArr.push(workEduData[name]);
+        }
+        this.workEduData["xAxis"] = nameOrder;
+        this.workEduData["yAxis"] = tempArr;
+        // 学位
+        tempArr = [];
+        let tempObj = { 类别: "全日制" };
+        Object.assign(tempObj, resData["全日制学位"]);
+        tempArr.push(tempObj);
+        tempObj = { 类别: "在职" };
+        Object.assign(tempObj, resData["在职学位"]);
+        tempArr.push(tempObj);
+        this.degreeData = tempArr;
+        // 学校
+        function sortSchoolRecord(x, y) {
+          return y.value - x.value;
+        }
+        // 全日制学校
+        tempArr = [];
+        let fullSchoolData = resData["全日制学校"];
+        let schoolPersonData = fullSchoolData["人数"];
+        for (let school in schoolPersonData) {
+          tempArr.push({ name: school, value: schoolPersonData[school] });
+        }
+        tempArr.sort(sortSchoolRecord);
+        let tempArr2 = tempArr.slice(0, 10);
+        let restSum = tempArr.slice(10).reduce((sum, e) => {
+          return sum + Number(e.value || 0);
+        }, 0);
+        tempArr2.push({ name: "其他", value: restSum });
+        this.fullSchoolData["人数"] = tempArr2;
+        // 级别
+        tempArr = [];
+        for (let key of this.schoolCategory) {
+          tempArr.push(fullSchoolData["级别"][key]);
+        }
+        this.fullSchoolData["级别"] = tempArr;
+        // 在职学校
+        tempArr = [];
+        let workSchoolData = resData["在职学校"];
+        schoolPersonData = workSchoolData["人数"];
+        for (let school in schoolPersonData) {
+          tempArr.push({ name: school, value: schoolPersonData[school] });
+        }
+        tempArr.sort(sortSchoolRecord);
+        tempArr2 = tempArr.slice(0, 10);
+        restSum = tempArr.slice(10).reduce((sum, e) => {
+          return sum + Number(e.value || 0);
+        }, 0);
+        tempArr2.push({ name: "其他", value: restSum });
+        this.workSchoolData["人数"] = tempArr2;
+        // 级别
+        tempArr = [];
+        for (let key of this.schoolCategory) {
+          tempArr.push(workSchoolData["级别"][key]);
+        }
+        this.workSchoolData["级别"] = tempArr;
       },
       (err) => {
-        console.log('err', err)
+        console.log("err", err);
       }
-    )
+    );
-
-
   },
   methods: {
     showGenderPie() {
-      let option;
+      let option = {
-      option = {
         title: {
           text: "恩施卷烟厂员工性别分布饼图",
           //   subtext: "",
@@ -498,9 +652,204 @@ export default {
       };
       option && this.regionCityChart.setOption(option);
     },
-    handleTabClick(tab, event) {
+    handleRegionTabClick(tab, event) {
       if (tab.label == "城市") {
-        setTimeout(this.showRegionCityPie, 0)
+        setTimeout(this.showRegionCityPie, 10);
+      }
+    },
+    showFullEduPie() {
+      let option = {
+        title: {
+          text: "恩施卷烟厂员工全日制学历分布饼图",
+          //   subtext: "",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            // name: "Access From",
+            type: "pie",
+            radius: "50%",
+            data: this.fullEduData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      this.fullEduChart.setOption(option);
+    },
+    showWorkEduBar() {
+      let option = {
+        title: {
+          text: "恩施卷烟厂员工在职学历分布直方图",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "category",
+          data: this.workEduData.xAxis,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: this.workEduData.yAxis,
+            type: "bar",
+          },
+        ],
+      };
+      this.workEduChart.setOption(option);
+    },
+    showDegreeBar() {
+      let option = {
+        title: {
+          text: "恩施卷烟厂员工学位分布直方图",
+        },
+        legend: {
+          orient: "vertical",
+          left: "right",
+        },
+        tooltip: {},
+        dataset: {
+          dimensions: ["类别", "学士", "硕士", "博士"],
+          source: this.degreeData,
+        },
+        xAxis: { type: "category" },
+        yAxis: {},
+        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
+      };
+      this.degreeChart.setOption(option);
+    },
+    handleEduTabClick(tab, event) {
+      if (tab.label == "在职") {
+        setTimeout(this.showWorkEduBar, 10);
+      }
+    },
+    showFullSchoolPie() {
+      let option = {
+        grid: [
+          {
+            x: "70%",
+            y: "20%",
+            width: "30%",
+            height: "60%",
+          },
+        ],
+        xAxis: [
+          {
+            gridIndex: 0,
+            type: "category",
+            data: this.schoolCategory,
+          },
+        ],
+        yAxis: [
+          {
+            gridIndex: 0,
+          },
+        ],
+        title: [
+          {
+            text: "全日制教育学校分布饼图",
+            x: "20%",
+            y: "3%",
+          },
+          {
+            text: "全日制教育学校分类饼图",
+            x: "75%",
+            y: "3%",
+          },
+        ],
+        tooltip: {},
+        legend: {
+          x: "center",
+          y: "bottom",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "50%",
+            center: ["30%", "50%"],
+            data: this.fullSchoolData["人数"],
+          },
+          {
+            type: "bar",
+            data: this.fullSchoolData["级别"],
+          },
+        ],
+      };
+      this.fullSchoolChart.setOption(option);
+    },
+    showWorkSchoolPie() {
+      let option = {
+        grid: [
+          {
+            x: "70%",
+            y: "20%",
+            width: "30%",
+            height: "60%",
+          },
+        ],
+        xAxis: [
+          {
+            gridIndex: 0,
+            type: "category",
+            data: this.schoolCategory,
+          },
+        ],
+        yAxis: [
+          {
+            gridIndex: 0,
+          },
+        ],
+        title: [
+          {
+            text: "在职教育学校分布饼图",
+            x: "20%",
+            y: "3%",
+          },
+          {
+            text: "在职教育学校分类饼图",
+            x: "75%",
+            y: "3%",
+          },
+        ],
+        tooltip: {},
+        legend: {
+          x: "center",
+          y: "bottom",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "50%",
+            center: ["30%", "50%"],
+            data: this.workSchoolData["人数"],
+          },
+          {
+            type: "bar",
+            data: this.workSchoolData["级别"],
+          },
+        ],
+      };
+      this.workSchoolChart.setOption(option);
+    },
+    handleSchoolTabClick(tab, event) {
+      if (tab.label == "在职") {
+        setTimeout(this.showWorkSchoolPie, 10);
       }
     },
   },
@@ -519,7 +868,7 @@ export default {
   margin: -10% auto 40px;
 }
 
-.region-title {
+.tab-title {
   margin: -8% auto 20px;
 }
 
@@ -534,6 +883,11 @@ export default {
   flex: 1;
 }
 
+.sbody-left2 {
+  flex: 2;
+  /* background-color: rgb(96, 52, 219); */
+}
+
 .sbody-right {
   /* background-color: rgb(70, 211, 52); */
   flex: 1;
@@ -544,6 +898,10 @@ export default {
   margin-right: 5%;
 }
 
+.tab-card2 {
+  margin-left: 15%;
+}
+
 .pic {
   height: 600px;
   width: 600px;
@@ -552,7 +910,13 @@ export default {
   /* border: 1px #ddd solid; */
 }
 
-.pic-region {
+.pic2 {
+  height: 600px;
+  width: 900px;
+  background-color: #fff;
+}
+
+.tab-pic {
   margin: 0px auto;
 }
 
@@ -561,6 +925,10 @@ export default {
   text-align: left;
   font-size: 30px;
 }
+
+.p2 {
+  margin-left: 20px;
+}
 </style>
 
 <style>