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/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: 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.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: 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/female/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/female/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/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: {
          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: {
      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();
    },
    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_famale.scss";
  </style>