xjc-vue/src/views/xjc-integratedmachine/environment/occ_details_video.vue

<template>
  <div class="pro_details_video">
    <head-component :headinfo=headinfo ref="headinfoRef"></head-component>
    <div class="page-content">
      <div class="page-img-box">
        <div class="top-content">
          <img class="top-content-left" src="@/assets/images/environment/keys-search-h.png">
          <div class="top-content-right">
            <div class="right-top">
              <p class="title">{{ entity.name }}</p>
              <div class="right-top-icon">
                <collectionComponent ref="collectionRef" :collection="collection_data"></collectionComponent>
              </div>
            </div>
            <div class="info-box">
              <p class="title" > 所属行业</p>
              <p class="answer" >{{entity.industryname}}</p>
            </div>
            <div class="info-box">
              <p class="title"> 职业兴趣类代码</p>
              <p class="answer" >{{entity.interestcode}}</p>
            </div>
          </div>
        </div>
        <div class="bottom-content">
          <div class="tab-box">
            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
              职业概述
            </div>
            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
              工作内容
            </div>
            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
              职业前景
            </div>
            <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
              本科专业
            </div>
            <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
              专科专业
            </div>
            <div :class="[sixPage?'item-box-active':'item-box']" @click="showPage(6)">
              职业视频
            </div>
          </div>
          <div class="one-page" v-show="onePage">
            <p class="title">职业概述</p>
            <div class="info"  v-html="entity.definition"></div>
          </div>
          <div class="one-page" v-show="twoPage">
            <p class="title">工作内容</p>
            <div class="info"  v-html="entity.normalwork"></div>
          </div>
          <div class="one-page" v-show="threePage">
            <p class="title">职业前景</p>
            <div class="info"  v-html="entity.prospects"></div>
          </div>
          <div class="one-page" v-show="fourPage">
            <p class="title">本科专业</p>
            <div class="info"   v-html="entity.employment">
            </div>
          </div>
          <div class="one-page" v-show="fivePage">
            <p class="title">专科专业</p>
            <div class="major">
              <div class="info-item"  v-for="(item,index) in zk_list" @click="jumpZY(item)">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="one-page" v-show="sixPage">
            <p class="title">职业视频</p>
            <div  ref="videoContainer" class="video-container"  v-if="entity.path">
              <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"
                     :data-setup="{}">
                <!-- 可以在这里插入source标签以指定你的视频源 -->
                <source :src="entity.path" type="video/mp4">
              </video>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
        v-model="sixPage"
        @before-close="dialogBeforeClose"
        destroy-on-close
        title="专业视频"
        width="1832px"
        height="915px"
        center
        align-center
        v-if="entity.path"
    >
      <div class="video-content" >
        <video ref="videoPlayer" video preload="auto" autoplay muted controls width="1798" height="900">
          <source :src="entity.path" type="video/mp4">
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
import { provide, ref } from 'vue';
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
import {occupationDetail} from "@/api/xjc-integratedmachine/environment/occupation.js";
const {proxy} = getCurrentInstance()
const {educationlevel} = proxy.useDict('educationlevel')


const router = useRouter()
const route = useRoute()
const tabIndex = ref("zyjd")
const headinfo = ref({})
const headinfoRef = ref(null);
const onePage = ref(true)
const twoPage = ref(false)
const threePage = ref(false)
const fourPage = ref(false)
const fivePage = ref(false)
const sixPage = ref(false)

function setHeadinfo(){
  headinfo.value = {
    title: '职业详情',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
    homeUrl:'/xjc-integratedmachine/environment/index',
    contrast:true,
    contrastType:3
  }
}

onMounted(() => {
  setHeadinfo()
})

const param = route.query



const entity = ref({})
const collectionRef = ref(null)
const collection_data = ref({})

function setCollection_data(){
  collection_data.value = {
    contentType: 3,
    contentId: param.id,
    contentVal: entity.value,
    source:'occ_details_video'
  }
}
const bk_list = ref([])
const zk_list = ref([])
function detail() {
  occupationDetail({
    id: param.id
  }).then(resp => {
    resp.entity.bk_list = resp.bk_list
    resp.entity.compare = resp.compare
    entity.value = resp.entity
    bk_list.value = entity.value.bk_list
    zk_list.value = resp.zk_list
    setCollection_data()
    collectionRef.value.getIsContrast(entity.value)
    if (headinfoRef.value) {
      headinfoRef.value.getCompareSizeData(3); // 调用子组件的 sayHello 函数
    }
    setTimeout(() => {
      setCollection_data();
    }, 1000);

  })
}
const parentMethod = () => {
  console.log('父组件方法被调用');
  detail()
};
provide('parentMethod', parentMethod);

const showPage = (val) => {
  if (val === 1) {
    onePage.value = true;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false;

  } else if (val === 2) {
    onePage.value = false;
    twoPage.value = true;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false;
  } else if (val === 3) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = true;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false;
  } else if (val === 4) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = true;
    fivePage.value = false;
    sixPage.value = false;
  } else if (val === 5) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = true;
    sixPage.value = false;
  } else if (val === 6) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = true;
  }
}
detail()
function dialogBeforeClose() {
  onePage.value = true;
  twoPage.value = false;
  threePage.value = false;
  fourPage.value = false;
  fivePage.value = false;
  sixPage.value = false
  senvenPage.value = false
  eightPage.value = false;
}

function jumpZY(item){
  router.push({
    path : '/xjc-integratedmachine/environment/pro_details_video',
    query :{
      id : item.id
    }
  })
}
</script>

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

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

  .page-content {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0;
    display: flex;
    justify-content: center;
  }

  .page-img-box {
    width: 1832px;
    height: 922px;
    margin-top: 13px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 35px 35px 35px 35px;
    display: flex;
    flex-direction: column;

    .top-content {
      width: 1832px;
      display: flex;
      justify-content: space-between;
      .top-content-left{
        width: 764px;
        height: 500px;
        background: #D9D9D9;
        border-radius: 5px 5px 5px 5px;
        margin-top:15px;
        margin-left: 34px;
      }
      .top-content-right {
        margin-left: 45px;
        width: 1782px;
        margin-left: 45px;
        //border: 1px solid;
        .title {
          font-weight: bold;
          font-size: 36px;
          color: #1E410E;
          line-height: 24px;
        }

        .school-level-box {
          display: flex;
          justify-content: left;
          .school-level {
            margin-right: 20px;
            width: 174px;
            height: 54px;
            background: #B3FC7C;
            border-radius: 5px 5px 5px 5px;
            font-weight: bold;
            font-size: 20px;
            color: #000000;
            line-height: 54px;
            text-align: center;
          }
        }

        .text-box {
          width: 1124px;
          p {
            margin-right: 20px;
          }
        }

        .right-top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .right-top-icon {
            width: 200px;
            height: 68px;
            display: flex;
            justify-content: space-between;
            margin-top: 24px;

            .item-img {
              display: flex;
              flex-direction: column;
              align-items: center;

              p {
                font-weight: 400;
                font-size: 20px;
                color: #515F6A;

              }

              img {
                width: 36px;
                height: 36px;
              }
            }
          }
        }

      }

      .info-box{
        //border: 1px solid;
        //margin-left: 33px;
        .title {
          height: 40px;
          border-left: 8px #8CE349 solid;
          margin-top: 33px;
          font-weight: 400;
          font-size: 28px;
          color: #333333;
          line-height: 40px;
          padding-left: 11px;
        }
       .answer{
         font-weight: 400;
         font-size: 20px;
         color: #333333;
         margin-top: 20px;
         margin-left: 20px;
       }
      }

    }

  }


  .bottom-content {
    margin-top: 10px;
    height: 500px;
    .tab-box {
      display: flex;
      padding-right: 279px;
      img {
        width: 36px;
        height: 36px;
        margin-right: 12px;
      }
    }


    .item-box {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 202px;
      height: 65px;
      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
      border-radius: 5px 5px 0px 0px;
      font-weight: 400;
      font-size: 32px;
      color: #979797;

    }

    .item-box-active {
      text-align: center;
      color: #000000;
      background: #FFFFFF;
      font-weight: bold;
      font-size: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 202px;
      height: 65px;
      background: #FFFFFF;
      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
      border-radius: 5px 5px 0px 0px;

    }
  }

  //.editor-content div,
  //.editor-content span,
  //.editor-content p,
  //.editor-content h1,
  //.editor-content h2,
  //.editor-content h3,
  //.editor-content h4,
  //.editor-content h5,
  //.editor-content h6 {
  //  font-size: 26px !important;
  //  line-height: 37px !important;
  //}

  .editor-content div,
  .editor-content span,
  .editor-content p {
    text-indent: 2em !important;
    text-align: left !important;
  }
}

.one-page {
  width: 1832px;
  height: 341px;
  background: #FFFFFF;
  border-radius: 0px 0px 35px 35px;
  border: 1px solid #FFFFFF;
  overflow: auto;
  line-height: 32px;
  padding-top: 10px;
  .title {
    height: 40px;
    border-left: 8px #8CE349 solid;
    margin-left: 33px;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 40px;
    padding-left: 11px;
  }

  .info {
    text-indent: 2em;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 40px;
  }
  .major{
    margin-top: 19px;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    display: flex;
    //justify-content: space-around;
    flex-wrap: wrap;

    .info-item{
      width: 244px;
      height: 80px;
      margin-left: 10px;
      background: #FFFFFF;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #A2F57F;
      font-weight: 400;
      font-size: 30px;
      padding-left: 10px;
      padding-right: 10px;
      color: #000000;
      line-height:  80px;
      text-align: center;
      margin-top: 14px;
      .info-text{
        margin-top: 19px;
        font-weight: 400;
        font-size: 20px;
        color: #333333;
      }
    }
  }

  .select-div {
    width: 100%;
    height: 100px;
    font-weight: 400;
    font-size: 30px;
    color: #333333;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 21px;

    .select-box {
      width: 300px;
      height: 90px;
      border: 1px solid #CCCCCC;
      line-height: 90px;
      text-align: center;
      margin-left: 10px;
    }

    .click-search {
      width: 170px;
      height: 90px;
      background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
      border-radius: 5px;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      margin-left: 20px;
    }
  }

  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    height: 74px !important;
    font-size: 24px;
    color: #1E410E;
  }

  ::v-deep .el-table tr {
    height: 74px !important;
    font-size: 20px;
  }

  ::v-deep .el-dialog__title {
    font-size: 34px !important;
  }

  ::v-deep .el-dialog {
    margin-top: 0px !important;
  }

  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 30px !important;
  }

}
.dict-dialog{
  max-width: 570px;
  height: 800px;
  overflow: auto;
  .dict-box {
    font-size: 24px;
    line-height: 34px;
    color: #333333;
  }
}

</style>