xjc-vue/src/views/xjc-integratedmachine/wakeup/career_maturity/evaluation.vue

<template>
  <div class="evaluation" v-loading="pageLoading">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="page-box">
        <div>
          <div class="tab-box">
            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">数据汇总</div>
            {{ onePage }}
            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">生涯决策知识</div>
            {{ twoPage }}
            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">生涯决策态度</div>
            {{ threePage }}
          </div>
        </div>
        <div class="one-page" v-show="onePage">
          <p class="maturity-text">生涯成熟度：<span>中等</span></p>
          <p class="text-info">
            综合来看，你对生涯发展有一定认知，但心理准备不足，缺乏系统规划，面对生涯选择时容易迷茫，易受周围同学或家长影响，尚未形成稳定的生涯发展思路。
          </p>
          <div class="table-box">

          </div>
        </div>
        <div class="two-page" v-show="twoPage">112</div>
        <div class="three-page" v-show="threePage">11112</div>
      </div>
    </div>
    <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
    <span>
      {{ describeInfo }}
    </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import {Calendar} from '@element-plus/icons-vue'
import {onMounted, reactive} from "vue";
import {maturityReport} from "@/api/xjc-integratedmachine/wakeup/index.js";

const headinfo = ref({})
const describeInfo = ref('')
let pageLoading = ref(false)

function setHeadinfo() {
  headinfo.value = {
    title: '生涯唤醒学习系统',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl: '/xjc-integratedmachine/wakeup/career_recognize/index'
  }
}

const centerDialogVisible = ref(false)
const onePage = ref(true)
const twoPage = ref(false)
const threePage = ref(false)

const position = reactive({x: 10, y: 10});
let isDragging = false;
let originX, originY;

const startDrag = (e) => {
  console.log("e", e)
  isDragging = true;
  originX = e.clientX - position.x;
  originY = e.clientY - position.y;
  console.log("originX", originX, originY, "originY")
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', stopDrag);
};

const onMouseMove = (e) => {
  if (isDragging) {
    position.x = e.clientX - originX;
    position.y = e.clientY - originY;
    console.log("position.x", position.x, "position.y", position.y)
  }
};

const stopDrag = () => {
  isDragging = false;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', stopDrag);
};
const describe = (val) => {
  describeInfo.value = val;
  centerDialogVisible.value = true;
};
const showPage = (val) => {
  if (val === 1) {
    onePage.value = true;
    twoPage.value = false;
    threePage.value = false;
  } else if (val === 2) {
    onePage.value = false;
    twoPage.value = true;
    threePage.value = false;
  } else if (val === 3) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = true;
  }
}
//请求页面数据
function getMaturityReport() {
  pageLoading = true;
  let id = "60f384a7-4970-44cb-a9da-0ce00519eee9"
  maturityReport({id :id }).then(res => {
    // console
    if(res.exampleList.length > 0){
      exampleInfo.value = res.exampleList[0];
    }
    exampleData.value = res.exampleList;
    pageLoading = false;
  }).catch((err)=>{
    console.log("error")
    pageLoading = false;
  })
}
onMounted(() => {
  setHeadinfo()
  getMaturityReport()
})

</script>

<style scoped lang="scss">
p {
  margin: 0;
  padding: 0;
}

.evaluation {
  background: url('@/assets/images/login/login-home-background.png') no-repeat;
  background-size: 1920px 1080px;
  z-index: 10;
  width: 100%;
  height: 1080px;

  .page-content {
    width: 100%;
    height: 980px;
    position: absolute;
    top: 100px;
    bottom: 0;
  }

  .page-box {
    width: 1832px;
    height: 910px;
    background: #FFFFFF;
    border-radius: 35px 35px 35px 35px;
    margin: 13px auto 0;
    padding-top: 25px;
    position: relative;
    overflow: auto;

    .tab-box {
      display: flex;
      justify-content: center;
      padding-left: 279px;
      padding-right: 279px;
    }

    .item-box {
      width: 422px;
      height: 136px;
      border: 1px dashed gray;
      text-align: center;
      line-height: 136px;
      font-weight: 400;
      font-size: 32px;
      margin-left: 3px;
      color: #A8A8A8;
    }

    .item-box-active {
      width: 422px;
      height: 136px;

      text-align: center;
      line-height: 136px;
      font-weight: 400;
      font-size: 32px;
      margin-left: 3px;
      color: #0088FF;
      background: #CFF7FF;
      border: 1px dashed gray;
      border-top: 3px solid #0088FF;
    }

    .one-page {
      .maturity-text{
        font-weight: bold;
        font-size: 32px;
        color: #333333;
        line-height: 52px;
        margin: 95px;
      }
      .text-info{
        font-weight: 400;
        font-size: 30px;
        color: #333333;
        line-height: 52px;
      }
      .table-box{
        width: 1525px;
        height: 720px;
        background: #C0E7FF;
        opacity: 0.2;
        margin-top: 26px;
      }

    }
    .one-page ,.two-page,.three-page{
      padding-left: 157px;
      padding-right: 157px;
    }
  }

  .fixed-box {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 125px;
  }

  .content-bottom {
    width: 100%;
    height: 270px;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;

    .draw {
      width: 109px;
      height: 170px;

      img {
        width: 109px;
        height: 170px;
      }
    }

    .ai-rabit {
      position: absolute;
      right: -27px;
      display: flex;
      align-items: center;

      .ai-rabit-text {
        width: 345px;
        height: 89px;
        background: #E8EEF7;
        font-weight: 300;
        margin-bottom: 20px;
        font-size: 22px;
        color: #000000;
        padding: 16px;
        border-radius: 24px 24px 24px 24px;
      }

      img {
        width: 178px;
        height: 270px;
      }
    }
  }

  .draggable-ball {
    position: absolute;
    cursor: pointer;
    user-select: none; /* 防止拖拽时选中文字 */
  }

  ::v-deep .el-dialog {
    width: 632px;
    height: 343px;
  }

  ::v-deep .el-dialog--center .el-dialog__body {
    font-weight: 400;
    font-size: 30px;
    color: #000000;
    padding: 30px;
    height: 192px;
  }

  .el-button--primary {
    width: 136px;
    height: 60px;
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    background: #35badd;
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    width: 422px;
    height: 136px;
    color: #A8A8A8;
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item .is-active {
    background-color: #CFF7FF;
    color: #266EFF;
  }
}

</style>