员工信息页面增加了个人经历和考核信息的功能

src/api/person.js

@@ -79,3 +79,12 @@ export function getReviewRoutine(params) {
     params
   })
 }
+
+export function getAppraise(params) {
+  return request({
+    url: '/person/appraise',
+    method: 'get',
+    params
+  })
+}
+

src/views/person/components/PersonPicture.vue

@@ -22,10 +22,81 @@
       <div class="pp-block2">
         <div class="pp-block2-left">
           <p class="item-title-p">个人经历</p>
+          <div class="item-content-div" style="margin-right: 10px">
+            <div class="tag-bar">
+              <span>工作经历</span>
+              <el-tag v-if="industryExperience"
+                >{{ industryExperience }}年工厂经验</el-tag
+              >
+              <el-tag v-if="jobExperience"
+                >{{ jobExperience }}年岗位经验</el-tag
+              >
+            </div>
+            <div class="tag-bar">
+              <span>教育经历</span>
+              <el-tag v-if="personData['全日制毕（肄）业学校（单位）名称']">{{
+                personData["全日制毕（肄）业学校（单位）名称"]
+              }}</el-tag>
+              <el-tag v-if="personData['全日制毕（肄）业专业名称']">{{
+                personData["全日制毕（肄）业专业名称"]
+              }}</el-tag>
+              <el-tag v-if="personData['在职毕（肄）业学校（单位）名称']">{{
+                personData["在职毕（肄）业学校（单位）名称"]
+              }}</el-tag>
+              <el-tag v-if="personData['在职毕（肄）业专业名称']">{{
+                personData["在职毕（肄）业专业名称"]
+              }}</el-tag>
+            </div>
+            <div class="tag-bar">
+              <span>知识技能</span>
+              <el-tag v-if="personData['最高专业技术资格等级']"
+                >{{ personData["最高专业技术资格等级"]
+                }}{{ personData["最高专业技术资格名称"] }}</el-tag
+              >
+              <el-tag v-if="personData['最高职业技能等级级别']"
+                >{{ personData["最高职业技能等级级别"]
+                }}{{ personData["最高职业技能等级名称"] }}</el-tag
+              >
+            </div>
+          </div>
+        </div>
+        <div class="pp-block2-right">
+          <p class="item-title-p">考核</p>
+          <div class="item-content-div">
+            <div id="appraise_chart" style="height: 100%; width: 100%"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="pp-block2">
+        <div class="pp-block2-left">
+          <p class="item-title-p">州级以上荣誉</p>
           <div class="item-content-div" style="margin-right: 10px"></div>
         </div>
         <div class="pp-block2-right">
-          <p class="item-title-p">绩效</p>
+          <p class="item-title-p">年度先进</p>
+          <div class="item-content-div"></div>
+        </div>
+      </div>
+
+      <div class="pp-block2">
+        <div class="pp-block2-left">
+          <p class="item-title-p">创新</p>
+          <div class="item-content-div" style="margin-right: 10px"></div>
+        </div>
+        <div class="pp-block2-right">
+          <p class="item-title-p">活动</p>
+          <div class="item-content-div"></div>
+        </div>
+      </div>
+
+      <div class="pp-block2">
+        <div class="pp-block2-left">
+          <p class="item-title-p">事务</p>
+          <div class="item-content-div" style="margin-right: 10px"></div>
+        </div>
+        <div class="pp-block2-right">
+          <p class="item-title-p">党务</p>
           <div class="item-content-div"></div>
         </div>
       </div>
@@ -37,6 +108,8 @@
 import * as echarts from "echarts";
 import "echarts-wordcloud";
 
+import * as personApi from "@/api/person";
+
 export default {
   props: ["data"],
   data() {
@@ -63,11 +136,91 @@ export default {
         { name: "创新达人", value: 90 },
         { name: "初级助理工程师", value: 80 },
       ],
+      radarData: [
+        {
+          value: [49, 45, 34, 20, 78],
+          name: "个人",
+        },
+        {
+          value: [33, 73, 21, 22, 57],
+          name: "全员平均",
+        },
+      ],
+      appraiseData: {},
     };
   },
   mounted() {
-    this.showRadarChart();
+    if (!this.personData.hasOwnProperty("姓名")) {
+      return;
+    }
+    // 发送词云请求
+    personApi
+      .getPersonTag({
+        query: this.$store.state.user.id_card,
+      })
+      .then(
+        (res) => {
+          this.wordcloudData = res.data.wordcloud;
+          this.radarData = res.data.radar;
           this.showWordCloud();
+          this.showRadarChart();
+        },
+        (err) => {
+          console.log("err", err);
+        }
+      );
+
+    // 发送考核请求
+    personApi
+      .getAppraise({
+        id_card: this.$store.state.user.id_card,
+      })
+      .then(
+        (res) => {
+          let resData = res.data;
+          let xAxisData = [],
+            yAxisData = [],
+            nameData = [];
+          let appraiseMap = {
+            不确定等次: 0,
+            不合格: 1,
+            不称职: 1,
+            基本合格: 2,
+            基本称职: 2,
+            合格: 3,
+            称职: 3,
+            优秀: 4,
+          };
+          // 此处不需要对年份进行排序，接口返回的数据有序
+          for (let year in resData) {
+            xAxisData.push(year);
+            let appraiseValue = resData[year];
+            if (appraiseValue in appraiseMap) {
+              yAxisData.push(appraiseMap[appraiseValue]);
+            } else {
+              yAxisData.push(0);
+            }
+            nameData.push(appraiseValue);
+          }
+          this.appraiseData = {
+            xAxis: xAxisData,
+            yAxis: yAxisData,
+            name: nameData,
+          };
+          this.showAppraiseChart();
+        },
+        (err) => {
+          console.log("err", err);
+        }
+      );
+  },
+  computed: {
+    industryExperience() {
+      return this.getAge(this.personData["进入行业时间"]);
+    },
+    jobExperience() {
+      return this.getAge(this.personData["现岗位起始时间"]);
+    },
   },
   methods: {
     showRadarChart() {
@@ -79,11 +232,13 @@ export default {
         title: {
           text: "",
         },
+        color: ["#5470c6", "#91cc75"],
         legend: {
           data: ["个人", "全员平均"],
         },
+        tooltip: {},
         radar: {
-          shape: "circle",
+          // shape: "circle",
           indicator: [
             // { name: "工作态度", max: 100 },
             { name: "工作能力", max: 100 },
@@ -97,16 +252,7 @@ export default {
           {
             name: "员工表现雷达图",
             type: "radar",
-            data: [
+            data: this.radarData,
-              {
-                value: [49, 45, 34, 20, 78],
-                name: "个人",
-              },
-              {
-                value: [33, 73, 21, 22, 57],
-                name: "全员平均",
-              },
-            ],
           },
         ],
       };
@@ -158,6 +304,61 @@ export default {
         ],
       });
     },
+    getAge(birthday) {
+      //出生时间 毫秒
+      let birthDayTime = new Date(birthday).getTime();
+      if (birthDayTime !== birthDayTime) {
+        // NaN
+        return null;
+      }
+      //当前时间 毫秒
+      let nowTime = new Date().getTime();
+      //一年毫秒数(365 * 86400000 = 31536000000)
+      return Math.ceil((nowTime - birthDayTime) / 31536000000);
+    },
+    showAppraiseChart() {
+      let myChart = echarts.init(document.getElementById("appraise_chart"));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          formatter: (params) => {
+            let year = params[0]["name"];
+            let value = params[0]["value"];
+            let yearIndex = this.appraiseData["xAxis"].indexOf(year);
+            let name = this.appraiseData["name"][yearIndex];
+            return `${name}: ${value}`;
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: this.appraiseData["xAxis"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        grid: {
+          top: "6%",
+          left: "1%",
+          right: "1%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+          },
+        ],
+        series: [
+          {
+            data: this.appraiseData["yAxis"],
+            type: "line",
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
   },
 };
 </script>
@@ -234,4 +435,14 @@ export default {
   height: 80%;
   border: 1px #e4e7ed solid;
 }
+
+.tag-bar {
+  margin: 10px 0px 0px 10px;
+}
+</style>
+
+<style>
+.tag-bar > .el-tag {
+  margin-left: 10px;
+}
 </style>

src/views/person/components/WorkInformation.vue

@@ -124,7 +124,8 @@ export default {
       personData: this.data,
     };
   },
-  mounted() {},
+  mounted() {
+  },
   computed: {
     workAge: function () {
       return this.getAge(this.personData.参加工作时间);

src/views/person/information.vue

@@ -33,7 +33,7 @@
       <el-tab-pane label="个人信息" name="ComPersonInformation"></el-tab-pane>
       <el-tab-pane label="人事变动记录" name="ComChange"></el-tab-pane>
     </el-tabs>
-    <component :is="comName" :data="personData"></component>
+    <component :is="comName" :data="personData" :key="personData['证件号码']"></component>
   </el-container>
 </template>
 
@@ -56,12 +56,12 @@ export default {
   data() {
     return {
       comName: "ComPersonPicture",
-      personData: null,
+      personData: {},
       avatarUrl: require("@/assets/images/女.png")
     };
   },
   mounted() {
-    // 发送请求
+    // 发送获取基本信息请求
     personApi.getPersonData({
       "id_card": this.$store.state.user.id_card
     }).then(
@@ -73,6 +73,8 @@ export default {
         console.log('err:', err);
       }
     )
+
+
   },
   computed: {
     personAge() {