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: 16rem; margin: 0 20px"

                src="/static/resume/male/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/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.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/male/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/male/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/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: {

      abilityEchart1VisibleComputed(){

        return this.natureList.reduce((total,item)=>{

          console.log(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(){

        console.log('natureEchartVisibleComputed this.natureList',this.natureList);

        let total = this.abilityList.reduce((total,item)=>{

          return total + item.value;

        },0);

        return total>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);

          });
        });
      },

      initXinggeEchart(list) {

        let dom = document.getElementById("echarts3");
        if(!dom){
          return;
        }
        let myChart = echarts.init(dom);
        if(myChart)

        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);

      },
      initNengliEchart(list) {

        console.log('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";

  </style>