antissoft / antissoft.dati.admin

<template>
  <div class="page">
    <div class="top-panel flex1">
      <div class="top-panel-content">
        <img class="user-head" src="/static/resume/head.png" alt="" />
        <div>
          <div class="user-info">
            <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>
          </div>
          <ul class="user-items">
            <li v-for="item in infoListComputed" :key="item.title">
              <img :src="'/static/resume/male/' + item.icon" alt="" />
              <span>{{ item.title }}：{{ item.value || "" }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div style="display: flex">
        <div style="flex: 1; margin-right: 30px">
          <div class="info-panel">
            <div class="info-title">
              <span>技能优势</span>
            </div>
            <div class="info-content">
              <ul v-if="userDetail.skillAdvantages && userDetail.skillAdvantages.length">
                <li v-for="item in userDetail.skillAdvantages" :key="item.title">
                  <h3>{{item.title}}</h3>
                  <p class="text-overflow2">{{item.desc}}</p>
                </li>
              </ul>
              <div v-else>暂无信息</div>
            </div>
          </div>
          <div class="info-panel">
            <div class="info-title">
              <span>教育经历</span>
            </div>
            <div class="info-content">
              <ul v-if="userDetail.workExperience && userDetail.workExperience.length">
                <li v-for="item in userDetail.workExperience" :key="item.date">
                  <h3 class="flex flex-between">
                    <span>{{ item.school }}</span>
                    <span style="font-size: 16px">{{item.date}}</span>
                  </h3>
                  <p class="flex flex-between">
                    <span>{{item.major}}</span>
                    <span>{{item.degree}}</span>
                  </p>
                </li>
              </ul>
              <div v-else>暂无信息</div>
            </div>
          </div>
        </div>
        <div class="info-panel" style="flex: 1">
          <div class="info-title">
            <span>工作经历</span>
          </div>
          <div class="info-content">
            <ul v-if="userDetail.educationalExperience && userDetail.educationalExperience.length">
              <li v-for="item in userDetail.educationalExperience" :key="item.date">
                <h3 class="flex flex-between">
                  <span>{{item.company}}</span>
                  <span>{{item.position}}</span>
                  <span style="font-size: 16px">{{item.date}}</span>
                </h3>
                <p class="text-overflow2">
                  {{item.desc}}
                </p>
              </li>
            </ul>
            <div v-else>暂无信息</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-panel flex1">
      <div class="panel">
        <div class="panel-title">
          <span>能力统计图</span>
          <img src="/static/resume/male/resume11.png" alt="" />
        </div>
        <div class="panel-body">
          <div id="echarts1"></div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">
          <span>能力统计图</span>
          <img src="/static/resume/male/resume11.png" alt="" />
        </div>
        <div class="panel-body">
          <div id="echarts2"></div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">
          <span>性格统计图</span>
          <img src="/static/resume/male/resume12.png" alt="" />
        </div>
        <div class="panel-body">
          <div id="echarts3"></div>
        </div>
      </div>
    </div>
  </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: "", icon: "resume1.png" },
        { title: "身高", value: "", icon: "resume2.png" },
        { title: "血型", value: "", icon: "resume3.png" },
        { title: "年龄", value: "", icon: "resume8.png" },
        { title: "婚否", value: "未婚", icon: "resume14.png" },
        { title: "民族", value: "汉族", icon: "resume4.png" },
        { 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: {},
    };
  },
  computed: {
    userDetail() {
      return this.user;
    },
    infoListComputed() {
      let user = { ...this.user };
      let infoList = [...this.infoList];
      infoList.find((t) => t.title == "民族").value = user.minzu;
      infoList.find((t) => t.title == "体重").value = user.Weight;
      infoList.find((t) => t.title == "身高").value = user.Height;
      infoList.find((t) => t.title == "血型").value = user.BloodType;
      infoList.find((t) => t.title == "年龄").value = user.age;
      infoList.find((t) => t.title == "婚否").value = user.Marriage;
      infoList.find((t) => t.title == "政治面貌").value = user.PoliticalOutlook;
      infoList.find((t) => t.title == "户籍所在地").value =
        user.RegisteredResidence;
      return infoList;
    },
  },
  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";
</style>