简历界面

yangzhi
1 parent 4ebb3d66
Showing 3 changed files with 321 additions and 55 deletions
src/api/user.js
src/views/resume/malestaff.vue
src/views/resume/style/style.scss
@@ -132,9 +132,9 @@ export function GetCompanyInvitation(data) {
 //删除面试邀请
 export function InvitationCompanyDelete(ids) {
     return request({
-        url: '/InvitationCompany/Delete' ,
+        url: '/InvitationCompany/Delete',
         method: 'post',
-        params:ids
+        params: ids
     });
 }
  
@@ -174,18 +174,18 @@ export function UserInfo_List(params) {
         url: `/UserInfo/List`,
         method: 'get',
         params
-    }) 
-} 
+    })
+}
  
-export function GetTypeSetting(params={}) {
+export function GetTypeSetting(params = {}) {
     return request({
         url: `/userType/GetTypeSetting`,
         method: 'get',
         params
-    }) 
-} 
+    })
+}
 //设置标签
-  export function ChangeTags(params) {
+export function ChangeTags(params) {
     return request({
         url: `/Users/ChangeTags`,
         method: 'post',
@@ -200,19 +200,19 @@ export function UserTypeSettings(params) {
         url: `/userType/GetSettings`,
         method: 'post',
         params
-    })  
-} 
+    })
+}
  
 export function saveTypeSetting(data) {
     return request({
         url: `/userType/saveTypeSetting`,
         method: 'post',
         data
-    })  
-} 
+    })
+}
  
 //设置标签
-  export function SelectPhoneBool(id,phone) {
+export function SelectPhoneBool(id, phone) {
     return request({
         url: `/Users/SelectPhoneBool?id=${id}&phone=${phone}`,
         method: 'get',
@@ -220,9 +220,16 @@ export function saveTypeSetting(data) {
 }
  
  
-export function ChangeClass(id,type) {
+export function ChangeClass(id, type) {
     return request({
         url: `/Users/ChangeClass?id=${id}&type=${type}`,
         method: 'post',
     })
+}
+
+export function getOuterUserInfo(id) {
+    return request({
+        url: `/UserInfo/GetOuterUserInfo?id=${id}`,
+        method: 'get'
+    });
 }
 \ No newline at end of file
@@ -5,10 +5,14 @@
         <img class="user-head" src="/static/resume/head.png" alt="" />
         <div>
           <div class="user-info">
-            <h2>张三</h2>
-            <img style="height:30px;margin:0 20px;" src="/static/resume/male/resume13.png" alt="" />
+            <h2>{{ userDetail.fullName }}</h2>
+            <img
+              style="height: 30px; margin: 0 20px"
+              src="/static/resume/male/resume13.png"
+              alt=""
+            />
             <div class="star-progress">
-              <div style="width:50%" class="star-progress-bar"></div>
+              <div style="width: 50%" class="star-progress-bar"></div>
             </div>
           </div>
           <ul class="user-items">
@@ -19,8 +23,8 @@
           </ul>
         </div>
       </div>
-      <div style="display: flex;">
-        <div style="flex:1;margin-right: 30px;">
+      <div style="display: flex">
+        <div style="flex: 1; margin-right: 30px">
           <div class="info-panel">
             <div class="info-title">
               <span>技能优势</span>
@@ -43,9 +47,9 @@
                 <li>
                   <h3 class="flex flex-between">
                     <span>西南石油大学</span>
-                    <span style="font-size:16px;">2014.06-2017.06</span>
+                    <span style="font-size: 16px">2014.06-2017.06</span>
                   </h3>
-                  <p  class="flex flex-between">
+                  <p class="flex flex-between">
                     <span>计算机科学与技术</span>
                     <span>本科</span>
                   </p>
@@ -54,35 +58,37 @@
             </div>
           </div>
         </div>
-        <div class="info-panel" style="flex:1;">
-            <div class="info-title">
-              <span>工作经历</span>
-            </div>
-            <div class="info-content">
-              <ul>
-                <li>
-                  <h3 class="flex flex-between">
-                    <span>腾讯</span>
-                    <span>前端工程师</span>
-                    <span style="font-size:16px;">2014.06-2017.06</span>
-                  </h3>
-                  <p  class="flex flex-between">
-                    负责公司xxxxxx的工作，这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他 内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其
-                  </p>
-                </li>
-                <li>
-                  <h3 class="flex flex-between">
-                    <span>腾讯</span>
-                    <span>前端工程师</span>
-                    <span style="font-size:16px;">2014.06-2017.06</span>
-                  </h3>
-                  <p  class="flex flex-between">
-                    负责公司xxxxxx的工作，这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他 内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其
-                  </p>
-                </li>
-              </ul>
-            </div>
+        <div class="info-panel" style="flex: 1">
+          <div class="info-title">
+            <span>工作经历</span>
+          </div>
+          <div class="info-content">
+            <ul>
+              <li>
+                <h3 class="flex flex-between">
+                  <span>腾讯</span>
+                  <span>前端工程师</span>
+                  <span style="font-size: 16px">2014.06-2017.06</span>
+                </h3>
+                <p class="text-overflow2">
+                  负责公司xxxxxx的工作，这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他
+                  内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其
+                </p>
+              </li>
+              <li>
+                <h3 class="flex flex-between">
+                  <span>腾讯</span>
+                  <span>前端工程师</span>
+                  <span style="font-size: 16px">2014.06-2017.06</span>
+                </h3>
+                <p class="text-overflow2">
+                  负责公司xxxxxx的工作，这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他
+                  内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其
+                </p>
+              </li>
+            </ul>
           </div>
+        </div>
       </div>
     </div>
     <div class="bottom-panel flex1">
@@ -117,9 +123,12 @@
   </div>
 </template>
 <script>
+import * as echarts from "echarts";
+import { getOuterUserInfo } from "@/api/user";
 export default {
   data() {
     return {
+      id: "",
       infoList: [
         { title: "性别", value: "男", icon: "resume17.png" },
         { title: "体重", value: "76KG", icon: "resume1.png" },
@@ -131,11 +140,250 @@ export default {
         { title: "政治面貌", value: "党员", icon: "resume5.png" },
         { title: "户籍所在地", value: "四川成都", icon: "resume9.png" },
       ],
+      echartOption1: {
+        grid: {
+          top: 30,
+          bottom: 20,
+          right: 20,
+          left: 20,
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            show: false,
+            color: "#EAEBEB",
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: "#9FA9BD",
+              interval: 0,
+              fontSize: 14,
+            },
+            data: [],
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            barWidth: 25,
+            label: {
+              show: true,
+              color: "#65EFFDFF",
+              position: "top",
+            },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#65EFFDFF" },
+                  { offset: 1, color: "#65EFFD00" },
+                ]),
+                barBorderRadius: [10, 10, 0, 0],
+              },
+            },
+            data: [],
+          },
+          {
+            type: "line",
+            color: "#65EFFD",
+            data: [],
+          },
+        ],
+      },
+      echartOption2: {
+        grid: {
+          top: 30,
+          bottom: 20,
+          right: 20,
+          left: 20,
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            show: false,
+            color: "#EAEBEB",
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: "#9FA9BD",
+              interval: 0,
+              fontSize: 14,
+            },
+            data: [],
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            barWidth: 25,
+            label: {
+              show: true,
+              color: "#65EFFDFF",
+              position: "top",
+            },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#65EFFDFF" },
+                  { offset: 1, color: "#65EFFD00" },
+                ]),
+                barBorderRadius: [10, 10, 0, 0],
+              },
+            },
+            data: [],
+          },
+          {
+            type: "line",
+            color: "#65EFFD",
+            data: [],
+          },
+        ],
+      },
+      echartOption3: {
+        radar: {
+          indicator: [
+            { name: "Sales", max: 6500 },
+            { name: "Administration", max: 16000 },
+            { name: "Information Technology", max: 30000 },
+            { name: "Customer Support", max: 38000 },
+            { name: "Development", max: 52000 },
+            { name: "Marketing", max: 25000 },
+          ],
+        },
+        series: [
+          {
+            type: "radar",
+            data: [
+              {
+                name: "",
+                value: [],
+                label: {
+                  show: true,
+                  formatter: function (params) {
+                    return params.value;
+                  },
+                },
+                areaStyle: {
+                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
+                    {
+                      color: "#6551FF52",
+                      offset: 0,
+                    },
+                    {
+                      color: "#6551FF00",
+                      offset: 1,
+                    },
+                  ]),
+                },
+              },
+            ],
+          },
+        ],
+      },
+      natureList: {},
+      abilityList: [],
+      user: {},
     };
   },
-  methods: {},
+  computed: {
+    userDetail(){
+      return this.user;
+    },
+    infoListComputed(){
+      let user = {...this.user};
+      let infoList = [...this.infoList];
+      infoList.find(t=>t.title == '民族').value = user.minzu;
+    }
+  },
+  created() {
+    this.id = this.$route.query.id;
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      getOuterUserInfo(this.id).then((res) => {
+        let { nature, ability, user } = res.data;
+        let natureList = [];
+
+        nature = nature[0];
+        ability = ability[0];
+
+        for (const key in nature) {
+          const val = nature[key];
+          natureList.push({
+            title: key,
+            value: val,
+          });
+        }
+        let abilityList = [];
+        for (const key in ability) {
+          const val = ability[key];
+          abilityList.push({
+            title: key,
+            value: val,
+          });
+        }
+
+        this.natureList = natureList;
+        this.abilityList = this.abilityList;
+        this.user = user;
+        this.$nextTick(() => {
+          this.initNengliEchart(natureList);
+          this.initXinggeEchart(abilityList);
+        });
+      });
+    },
+    initEchart() {
+      this.initNengliEchart();
+    },
+    initXinggeEchart(list) {
+      let myChart = echarts.init(document.getElementById("echarts3"));
+      this.echartOption3.radar.indicator = list.map((t) => {
+        return { name: t.title, max: 100 };
+      });
+      this.echartOption3.series[0].data[0].value = list.map((t) => t.value);
+      myChart.setOption(this.echartOption3);
+      console.log("this.echartOption3", this.echartOption3);
+    },
+    initNengliEchart(list) {
+      //第一个echart图
+      let myChart = echarts.init(document.getElementById("echarts1"));
+      let list1 = list.slice(0, 6);
+      this.echartOption1.xAxis[0].data = list1.map((t) => t.title);
+      this.echartOption1.series[0].data = list1.map((t) => t.value);
+      this.echartOption1.series[1].data = list1.map((t) => t.value);
+      myChart.setOption(this.echartOption1);
+
+      //第二个图
+      if (list.length > 6) {
+        let myChart2 = echarts.init(document.getElementById("echarts2"));
+        let list2 = list.slice(6);
+        this.echartOption2.xAxis[0].data = list2.map((t) => t.title);
+        this.echartOption2.series[0].data = list2.map((t) => t.value);
+        this.echartOption2.series[1].data = list2.map((t) => t.value);
+        myChart2.setOption(this.echartOption2);
+      }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
-@import 'style/style.scss';
+@import "style/style.scss";
 </style>
 \ No newline at end of file
@@ -22,6 +22,13 @@ li {
     align-items: center;
 }
  
+.text-overflow2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
 .page {
     height: 100vh;
     background-image: url(/static/resume/male/page_bg.png);
@@ -128,10 +135,6 @@ li {
                 }
                 p {
                     color: #ccc;
-                    display: -webkit-box;
-                    -webkit-box-orient: vertical;
-                    -webkit-line-clamp: 2;
-                    overflow: hidden;
                     line-height: 1.5em;
                 }
             }
@@ -148,6 +151,8 @@ li {
         border: 1px solid #51D2FF;
         margin-right: 20px;
         padding: 15px;
+        display: flex;
+        flex-direction: column;
         &:last-child {
             margin-right: 0;
         }
@@ -160,5 +165,11 @@ li {
                 margin-left: 10px;
             }
         }
+        .panel-body {
+            flex: 1;
+        }
+        [id^=echarts] {
+            height: 100%;
+        }
     }
 }
 \ No newline at end of file