develop_interview/src/views/resume/femalestaff.vue

<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: 16rem; margin: 0 20px"
              src="/static/resume/female/resume13.png"
              alt=""
            />
            <div class="star-progress">
              <div
                :style="{
                  width: 'calc(140px / 7 * ' + (userDetail.stars || 0) + ')',
                }"
                class="star-progress-bar"
              ></div>
            </div>
          </div>
          <ul class="user-items">
            <li v-for="item in infoListComputed" :key="item.title">
              <img :src="'/static/resume/female/' + 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.educationalExperience &&
                  userDetail.educationalExperience.length
                "
              >
                <li
                  v-for="item in userDetail.educationalExperience"
                  :key="item.date"
                >
                  <h3 class="flex flex-between">
                    <span>{{ item.school }}</span>
                    <span style="font-size: 10rem">{{ 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.workExperience && userDetail.workExperience.length
              "
            >
              <li v-for="item in userDetail.workExperience" :key="item.date">
                <h3 class="flex flex-between">
                  <span>{{ item.company }}</span>
                  <span>{{ item.position }}</span>
                  <span style="font-size: 10rem">{{ 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"
      v-if="
        abilityEchart1VisibleComputed ||
        abilityEchart2VisibleComputed ||
        natureEchartVisibleComputed
      "
    >
      <div class="panel" v-if="abilityEchart1VisibleComputed">
        <div class="panel-title">
          <span>能力统计图</span>
          <img src="/static/resume/female/resume11.png" alt="" />
        </div>
        <div class="panel-body">
          <div id="echarts1"></div>
        </div>
      </div>
      <div class="panel" v-if="abilityEchart2VisibleComputed">
        <div class="panel-title">
          <span>能力统计图</span>
          <img src="/static/resume/female/resume11.png" alt="" />
        </div>
        <div class="panel-body">
          <div id="echarts2"></div>
        </div>
      </div>
      <div class="panel" v-if="natureEchartVisibleComputed">
        <div class="panel-title">
          <span>性格统计图</span>
          <img src="/static/resume/female/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: {
        textStyle:{
          fontSize:'8rem'
        },
        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: "#eaeaea",
              interval: 0,
              fontSize: 14,
            },
            data: [],
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 25,
            label: {
              show: true,
              color: "#e9a6ff",
              position: "top",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#e9a6ffff" },
                  { offset: 1, color: "#e9a6ff00" },
                ]),
                barBorderRadius: [10, 10, 0, 0],
              },
            },
            data: [],
          },
          {
            type: "line",
            color: "#e9a6ff",
            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: "#eaeaea",
              interval: 0,
              fontSize: 14,
            },
            data: [],
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 25,
            label: {
              show: true,
              color: "#e9a6ff",
              position: "top",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#e9a6ffff" },
                  { offset: 1, color: "#e9a6ff00" },
                ]),
                barBorderRadius: [10, 10, 0, 0],
              },
            },
            data: [],
          },
          {
            type: "line",
            color: "#e9a6ff",
            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: "#e9a6ff52",
                      offset: 0,
                    },
                    {
                      color: "#e9a6ff00",
                      offset: 1,
                    },
                  ]),
                },
              },
            ],
          },
        ],
      },
      natureList: [],
      abilityList: [],
      user: {},
    };
  },
  computed: {
    abilityEchart1VisibleComputed() {
      return (
        this.natureList.reduce((total, item) => {
          return total + item.value;
        }, 0) > 0
      );
    },
    abilityEchart2VisibleComputed() {
      return (
        this.natureList.length > 6 &&
        this.natureList.slice(6).reduce((total, item) => {
          return total + item.value;
        }, 0) > 0
      );
    },
    natureEchartVisibleComputed() {
      return (
        this.abilityList.reduce((total, item) => {
          return total + item.value;
        }, 0) > 0
      );
    },
    userDetail() {
      let user = { ...this.user };
      user.educationalExperience = JSON.parse(
        user.educationalExperience || "[]"
      );
      user.skillAdvantages = JSON.parse(user.skillAdvantages || "[]");
      user.workExperience = JSON.parse(user.workExperience || "[]");
      return 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();
    this.initRem();
  },
  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 = abilityList;
        this.user = user;
        this.$nextTick(() => {
          this.initNengliEchart(natureList);
          this.initXinggeEchart(abilityList);
        });
      });
    },
    resetChart(){
      console.log('resetChart');
      console.log('this.echartOption1',this.echartOption1);
      console.log('this.echartOption2',this.echartOption2);
      console.log('this.echartOption3',this.echartOption3);
      this.$nextTick(()=>{
        echarts.init(document.getElementById("echarts1")).setOption(this.echartOption1);
        echarts.init(document.getElementById("echarts2")).setOption(this.echartOption2);
        echarts.init(document.getElementById("echarts3")).setOption(this.echartOption3);
      })
      
    },
    initEchart() {
      this.initNengliEchart();
    },
    initXinggeEchart(list) {
      let dom = document.getElementById("echarts3");
      if (!dom) {
        return;
      }
      let myChart = echarts.init(dom);
      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) {
      let dom = document.getElementById("echarts1");
      if (!dom) {
        return;
      }
      //第一个echart图
      let myChart = echarts.init(dom);
      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_famale.scss";
</style>