实现了员工页面的创新、活动、论文模块

src/api/person.js

@@ -103,3 +103,27 @@ export function getAdvance(params) {
     params
   })
 }
+
+export function getInnovation(params) {
+  return request({
+    url: '/person/innovation',
+    method: 'get',
+    params
+  })
+}
+
+export function getArticle(params) {
+  return request({
+    url: '/person/article',
+    method: 'get',
+    params
+  })
+}
+
+export function getActivity(params) {
+  return request({
+    url: '/person/activity',
+    method: 'get',
+    params
+  })
+}

src/views/person/components/PersonPicture.vue

@@ -59,12 +59,79 @@
       </div>
 
       <div class="pp-block2">
-        <div class="pp-block2-left">
+        <div class="pp-block2-left height-350">
           <p class="item-title-p">创新</p>
-          <div class="item-content-div"></div>
+          <div class="item-content-div">
+            <el-table
+              :data="innovationData"
+              max-height="250"
+              border
+              style="width: 90%; margin: 10px auto"
+            >
+              <el-table-column prop="year" label="年份" width="100" sortable>
+              </el-table-column>
+              <el-table-column prop="scale" label="范围" width="100">
+              </el-table-column>
+              <el-table-column prop="prize" label="奖项"> </el-table-column>
+              <el-table-column prop="grade" label="级别" width="80">
+              </el-table-column>
+              <el-table-column prop="item" label="项目名"> </el-table-column>
+            </el-table>
           </div>
-        <div class="pp-block2-right">
+        </div>
+        <div class="pp-block2-right height-350">
           <p class="item-title-p">活动</p>
+          <div class="item-content-div">
+            <el-table
+              :data="activityData"
+              max-height="250"
+              border
+              style="width: 90%; margin: 10px auto"
+            >
+              <el-table-column
+                v-for="column in activityColumns"
+                :key="column.prop"
+                :prop="column.prop"
+                :label="column.label"
+                :width="column.width"
+                :sortable="column.sortable"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+
+      <div class="pp-block2">
+        <div class="pp-block2-left height-350">
+          <p class="item-title-p">论文</p>
+          <div class="item-content-div">
+            <el-table
+              :data="articleData"
+              max-height="250"
+              border
+              style="width: 90%; margin: 10px auto"
+            >
+              <el-table-column prop="year" label="年份" width="100" sortable>
+              </el-table-column>
+              <el-table-column prop="role" label="角色" width="100">
+              </el-table-column>
+              <el-table-column prop="title" label="标题"> </el-table-column>
+              <el-table-column prop="publication_name" label="刊物名称">
+              </el-table-column>
+              <el-table-column
+                prop="publication_type"
+                label="刊物类别"
+                width="100"
+              >
+              </el-table-column>
+              <el-table-column prop="status" label="状态" width="80">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div class="pp-block2-right height-350">
+          <p class="item-title-p">项目</p>
           <div class="item-content-div"></div>
         </div>
       </div>
@@ -108,7 +175,6 @@
           </div>
         </div>
       </div>
-      
     </div>
   </div>
 </template>
@@ -124,40 +190,14 @@ export default {
   data() {
     return {
       personData: this.data,
-      wordcloudData: [
+      wordcloudData: [],
-        { name: "女", value: 1 },
+      radarData: [],
-        { name: "三连优秀", value: 90 },
-        { name: "学士", value: 40 },
-        { name: "大学", value: 40 },
-        { name: "90后", value: 1 },
-        { name: "兴趣盎然", value: 24 },
-        { name: "初出茅庐", value: 10 },
-        { name: "中共党员", value: 25 },
-        { name: "本省人", value: 1 },
-        { name: "三次优秀", value: 90 },
-        { name: "文思敏捷", value: 70 },
-        { name: "新党员", value: 25 },
-        { name: "运动达人", value: 24 },
-        { name: "初来乍到", value: 20 },
-        { name: "四级电工", value: 80 },
-        { name: "优秀员工", value: 90 },
-        { name: "积极踊跃", value: 8 },
-        { name: "创新达人", value: 90 },
-        { name: "初级助理工程师", value: 80 },
-      ],
-      radarData: [
-        {
-          value: [49, 45, 34, 20, 78],
-          name: "个人",
-        },
-        {
-          value: [33, 73, 21, 22, 57],
-          name: "全员平均",
-        },
-      ],
       appraiseData: {},
       honorData: [],
       advanceData: [],
+      innovationData: [],
+      articleData: [],
+      activityData: [],
     };
   },
   mounted() {
@@ -252,6 +292,36 @@ export default {
         console.log("err", err);
       }
     );
+
+    // 发送创新请求
+    personApi.getInnovation({ id_card: this.$store.state.user.id_card }).then(
+      (res) => {
+        this.innovationData = res.data;
+      },
+      (err) => {
+        console.log("err", err);
+      }
+    );
+
+    // 发送论文请求
+    personApi.getArticle({ id_card: this.$store.state.user.id_card }).then(
+      (res) => {
+        this.articleData = res.data;
+      },
+      (err) => {
+        console.log("err", err);
+      }
+    );
+
+    // 发送活动请求
+    personApi.getActivity({ id_card: this.$store.state.user.id_card }).then(
+      (res) => {
+        this.activityData = res.data;
+      },
+      (err) => {
+        console.log("err", err);
+      }
+    );
   },
   computed: {
     industryExperience() {
@@ -260,6 +330,40 @@ export default {
     jobExperience() {
       return this.getAge(this.personData["现岗位起始时间"]);
     },
+    activityColumns() {
+      let columns = [
+        {
+          prop: "year",
+          label: "年份",
+          width: "100",
+          sortable: true,
+        },
+        {
+          prop: "name",
+          label: "活动名",
+        },
+        {
+          prop: "item",
+          label: "项目名",
+        },
+        {
+          prop: "grade",
+          label: "级别",
+          width: "80",
+        },
+      ];
+      // 动态添加列名
+      if (this.activityData.length > 0) {
+        let row = this.activityData[0];
+        if ("prize" in row) {
+          columns.push({ prop: "prize", label: "奖品" });
+        }
+        if ("role" in row) {
+          columns.push({ prop: "role", label: "角色", width: "80" });
+        }
+      }
+      return columns;
+    },
   },
   methods: {
     showRadarChart() {
@@ -494,6 +598,10 @@ export default {
   width: 50%;
 }
 
+.height-350 {
+  height: 350px;
+}
+
 .item-title-p {
   border-left: 4px solid #000;
   padding-left: 10px;